在悬停时停止推动元素

Question

当用户将鼠标悬停在元素上时。它增加了字体重量。是否有可能使它不移动除此之外的元素？现在，由于字体粗细增加，空间int增加，因此元素变大。

.top-nav {
  list-style: none;
  margin-top: 50px;
  float: right;
  margin-right: 30px;
}
.top-nav li {
  margin-right: 30px;
  display: inline-block;
}
.top-nav li a:link,
.top-nav li a:visited {
  font-size: 120%;
  padding: 5px 10px;
}
.top-nav li a:hover,
.top-nav li a:active {
  background-color: #1BA39C;
  font-weight: 700;
  overflow-x: hidden;
}

<nav>
  <ul class="top-nav">
    <li><a href="#">Kāpēc ProFoto</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">Par mani</a>
    </li>
    <li><a href="#">Atsauksmes</a>
    </li>
    <li><a href="#">Foto plāni</a>
    </li>
  </ul>
</nav>