[SOLVED] Letter-Spacing moving other divs when hovering

Letter-Spacing moving other divs when hovering

i have a navigation bar on the website im currently building and when you hover over one word, the letter spacing increases. my problem is that it automatically moves the words on the left and on the right even though theoretically there is enough space for the letter-spacing to happen without anything else getting moved, does anyone know a workaround for this?

.heading {
  color: white;
  text-align: center;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 3px;
  background: black;
}

.nav_subh {
  color: white;
  text-align: center;
  margin: 1rem;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 2px;
  transition: .3s ease-in-out;
}

.current_subh {
  color: white;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 5px;
  transition: .3s ease-in-out;
}

#Work:hover .nav_subh {
  letter-spacing: 5px;
}

#About:hover .nav_subh {
  letter-spacing: 5px;
}

#Contact:hover .nav_subh {
  letter-spacing: 5px;
}

#Work {
  margin: 0 1rem 0 0;
}

#About {
  margin: 0 1rem 0 1rem;
}

#Contact {
  margin: 0 0 0 1rem;
}

.current_subh {
  color: white;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 6px;
}

.navigation {
  width: 30rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

<html>

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
  <title>Test</title>
</head>

<body style=background-color:black>

  <h1 class="heading">Test</h1>

  <div class="navigation">
    <div id="Work">
      <a class="nav_subh" href="work.html">
         Work
        </a>
    </div>
    <div id="About">
      <a class="nav_subh" href="about.html">
        About
        </a>
    </div>
    <div id="Contact">
      <a class="current_subh" href="contact.html">
        Contact
        </a>
    </div>
  </div>

</body>

</html>

Solution

your element width is set to the minimum and due to margin and other layout properties it gets to move the others you should give your .nav__subh some static width and it is possible in only block position so try adding this in your css

 .nav_subh {
        color: white;
        text-align: center;
        margin: 1rem;
        overflow: hidden;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 2px;
        transition: .3s ease-in-out;
        width: 5rem;
        display: block;
    }