[FIXED] When i use the hover element in CSS to translate {transform: translateX(20px)} the nav bar links to left, the entire web page shakes left and right

Issue

.nav-links a {
  display: block;
  color: var(--secondColor);
  padding: 1rem;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  text-shadow: yellow;
  transition: var(--mainTransition);
}

.nav-links a:hover {
  background: var(--mainGrey);
  transform: translateX(20px);
  color: var(--mainColor);
}

<nav class="nav-bar">
  <div class="nav-links">
    <ul>
      <li><a href="#" class="nav-link">home</a></li>
      <li><a href="#" class="nav-link">skill</a></li>
      <li><a href="#" class="nav-link">about</a></li>
      <li><a href="#" class="nav-link">project</a></li>
      <li><a href="#" class="nav-link">team</a></li>
    </ul>
  </div>
</nav>

When i use transform: translateX(20px) property in hover element, the entire web page shakes left and right This problem does not arise if i use the padding property in hover element to move the links to left but i want to use the translate property for more flexibility

Solution

Just turn display: block to display: inline-block on your anchor tags. They are full width with display: block and that causes an overflow and horizontal scroll bar when they get translated by 20px.

.nav-links a {
  display: inline-block;
  color: var(--secondColor);
  padding: 1rem;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  text-shadow: yellow;
  transition: var(--mainTransition);
}

.nav-links a:hover {
  background: var(--mainGrey);
  transform: translateX(20px);
  color: var(--mainColor);
}

<nav class="nav-bar">
  <div class="nav-links">
    <ul>
      <li><a href="#" class="nav-link">home</a></li>
      <li><a href="#" class="nav-link">skill</a></li>
      <li><a href="#" class="nav-link">about</a></li>
      <li><a href="#" class="nav-link">project</a></li>
      <li><a href="#" class="nav-link">team</a></li>
    </ul>
  </div>
</nav>

Answered By - JHeth

Answer Checked By - David Marino (PHPFixing Volunteer)