Блоки скачут в менюшке css

Question

Помогите пожалуйста с решением проблемы. При наведении на менюшку блоки смещаются, как это исправить? Картинку логотипа прилагаю ниже. Использовала шрифты Roboto Slab и Fontawesome

body {
    font-family: 'Roboto Slab', Tahoma, sans-serif;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
}

p, div, a, h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

div, p, input, button, form {
    box-sizing: border-box;
}

.clearfix:after {
    content: '';
    display: table;
    width: 100%
}

.container {
    margin: 0px auto;
    width: 1230px;
}

.menu__logo {
    margin: 12px 10px 15px 0px;
    display: block;
    float: left;
}

.menu__nav {
    float: left;
    margin-top: 27px;
}

.menu__nav_items {
    list-style: none;
    float: left;
    margin-right: 24px;
}

.menu__nav_items a {
    text-decoration: none;
    color: #2f1059;
    font-weight: 700;
}

.menu__nav_items:last-child {
    margin-right: 0;
}

.menu__contacts {
    float: right;
    margin-top: 10px;
}

.menu__contacts_phone {
    color: #2f1059;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 6px;
}

.menu__contacts_button {
    outline: none;
    border: 1px solid #2f1059;
    border-radius: 5px;
    padding: 10px 12px;
    background-color: #fff;
    margin-left: 10px;
}

.menu__contacts_button a {
    text-decoration: none;
    color: #2f1059;
    font-weight: 700;
}

.menu__contacts_button i {
    margin-right: 7px;
    color: #2f1059;
}

.menu__nav_items:hover {
    background-color: rgba(0,0,0,.6);
    padding: 5px 5px;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/fontawesome-free-5.13.0-web/css/all.min.css">
<link rel="icon" href="css/fontawesome-free-5.13.0-web/svgs/brands/facebook.svg" type="image/x-icon">

<body>
  <header>
    <div class="container">
      <div class="menu">
        <img src="https://i.stack.imgur.com/NsVth.png" alt="Логотип" class="menu__logo">
        <nav class="menu__nav">
          <ul>
            <li class="menu__nav_items"><a href="#">Инфраструктура</a></li>
            <li class="menu__nav_items"><a href="#">Планировка и цены</a></li>
            <li class="menu__nav_items"><a href="#">Материалы и отделка</a></li>
            <li class="menu__nav_items"><a href="#">Документы</a></li>
            <li class="menu__nav_items"><a href="#">Контакты</a></li>
          </ul>
        </nav>
        <div class="menu__contacts">
          <div class="menu__contacts_phone">+7 (495) 544-23-12</div>
          <button class="menu__contacts_button"><i class="fas fa-phone-alt"></i><a href="#">Заказать звонок</a></button>
        </div>
      </div>
    </div>
  </header>
</body>

картинка логотипа

Answer 1

Очевидо, что сьезжают из-за добавляения padding: 5px; при ховере.
Можно задать его для .menu__nav_items. Можно его удалить, смотря какой результат вы хотите получить.

Вот я задал padding: 5px; для ссылок .menu__nav_items a.

body {
    font-family: 'Roboto Slab', Tahoma, sans-serif;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
}

p, div, a, h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

div, p, input, button, form {
    box-sizing: border-box;
}

.clearfix:after {
    content: '';
    display: table;
    width: 100%
}

.container {
    margin: 0px auto;
    width: 1230px;
}

.menu__logo {
    margin: 12px 10px 15px 0px;
    display: block;
    float: left;
}

.menu__nav {
    float: left;
    margin-top: 27px;
}

.menu__nav_items {
    list-style: none;
    float: left;
    margin-right: 24px;
}

.menu__nav_items a {
    text-decoration: none;
    color: #2f1059;
    font-weight: 700;
    display: inline-block;
    padding: 5px;
}

.menu__nav_items:last-child {
    margin-right: 0;
}

.menu__contacts {
    float: right;
    margin-top: 10px;
}

.menu__contacts_phone {
    color: #2f1059;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 6px;
}

.menu__contacts_button {
    outline: none;
    border: 1px solid #2f1059;
    border-radius: 5px;
    padding: 10px 12px;
    background-color: #fff;
    margin-left: 10px;
}

.menu__contacts_button a {
    text-decoration: none;
    color: #2f1059;
    font-weight: 700;
}

.menu__contacts_button i {
    margin-right: 7px;
    color: #2f1059;
}

.menu__nav_items:hover {
    background-color: rgba(0,0,0,.6);
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/fontawesome-free-5.13.0-web/css/all.min.css">
<link rel="icon" href="css/fontawesome-free-5.13.0-web/svgs/brands/facebook.svg" type="image/x-icon">

<body>
  <header>
    <div class="container">
      <div class="menu">
        <img src="https://i.stack.imgur.com/NsVth.png" alt="Логотип" class="menu__logo">
        <nav class="menu__nav">
          <ul>
            <li class="menu__nav_items"><a href="#">Инфраструктура</a></li>
            <li class="menu__nav_items"><a href="#">Планировка и цены</a></li>
            <li class="menu__nav_items"><a href="#">Материалы и отделка</a></li>
            <li class="menu__nav_items"><a href="#">Документы</a></li>
            <li class="menu__nav_items"><a href="#">Контакты</a></li>
          </ul>
        </nav>
        <div class="menu__contacts">
          <div class="menu__contacts_phone">+7 (495) 544-23-12</div>
          <button class="menu__contacts_button"><i class="fas fa-phone-alt"></i><a href="#">Заказать звонок</a></button>
        </div>
      </div>
    </div>
  </header>
</body>

БЛОГ НА HUSL

Блоки скачут в менюшке css

Ответы (1 шт):