Почему дергается элемент при наведении?

Question

Norum @Norum

HTML
CSS

Почему дергается элемент при наведении?

Почему при наведении на элемент меню, он дергается?

<header>
    <div class="wrapper">
      <div class="content">
        
        <div class="logo">
           Inter-Web
        </div>
        <nav class="menu">
          <ul>
              <li><a href="#">Главная</a>
                <ul class="sub_menu">
                  <li><a href="#">Брендинг</a></li>
                  <li><a href="#">Вэб-разработка</a></li>
                  <li><a href="#">Медиа-маркетинг</a></li>
                  <li><a href="#">Комплексное<br>продвижение</a></li>
                </ul>
              </li>
              <li><a href="#">О нас</a></li>
              <li><a href="#">Услуги</a>
              <li><a href="#">Порядок работы</a></li>
              <li><a href="#">Этапы работы</a></li>
              <li><a href="#">Портфолио</a></li>
              <li><a href="#">Новости</a></li>
              <li ><a href="#">Конакты</a></li>
          </ul>
        </nav>
                
        <div class="contacts">
          <a class="phone" href="tel:88005569874">8 800-556-98-74</a>
          <button class="request">Заказать звонок</button>      
          <i class="fab fa-viber"></i> 
          <i class="fab fa-telegram-plane"></i>
          <i class="fab fa-whatsapp"></i>        
        </div>
      </div>
    </div>
  </header>

header {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    right: 0;
    left: 0;
}


header .wrapper {
    max-width: 1800px;
}


header .wrapper .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: "Rostov";
    color: #fff;
    font-size: 18px;
}

 .menu > ul  {
    display: flex !important;
    box-sizing: border-box !important;
}

.menu ul li {
    margin-right: 40px;
    font-size: 16px;
    padding-left: 0;
}

.menu ul li:last-child {
    margin-right: 0 !important;
}


.menu ul li:hover {
    font-weight: bold;
    transition: 0.3s linear !important;
}

.menu ul li:hover .sub_menu{
    visibility: visible;
    opacity: 1;
}

.sub_menu {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.44);
    padding: 15px;
    background-color: rgba(0,0,0,0.5);
    visibility: hidden;
      opacity: 0;
      transition: visibility ease 0.3s, opacity ease 0.3s;
}

.sub_menu li {
    margin-bottom: 16px;
    font-size: 15px;
}


.sub_menu li:last-child {
    margin-bottom: 0;
}


.menu ul li:first-child > a, .sub_menu li:first-child > a  {
    color: #E78E76 !important;
}

.menu ul li:nth-child(2) > a {
    color: #E76FB1;
}

.menu ul li:nth-child(3) > a {
    color: #CBBE9C;
}

.menu ul li:nth-child(4) > a, .sub_menu li:nth-child(3) > a {
    color: #5FDDF1 !important;
}
 
.menu ul li:nth-child(5) > a {
    color: #14976D !important;
}


.menu ul li:nth-child(6) > a {
    color: #2EADC1 !important;
}


.menu ul li:nth-child(7) > a {
    color: #308AE9 !important;
}

.menu ul li:last-child > a, .sub_menu li:last-child > a   {
    color: #4171F8 !important;
}

.sub_menu li:nth-child(2) > a {
    color: #7DEBDF !important;
}

.contacts a.phone {
    font-size: 11px;
    color: #fff;
    margin-right: 20px;
    display: inline-block;

}

.contacts a.phone:after{
    content: '';
    border-bottom: 1px solid #fff;
    width: 0;
    display: block;
    transition: 0.3s ease;
}

.contacts a.phone:hover:after {
    content: '';
    border-bottom: 1px solid #fff;
    width: 100% !important;
    transition: 0.3s ease;
    display: block;
}
      

.request {
    border: 2px solid #FFFFFF;
    background-color: transparent;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    padding: 9px 8px;
    transition: 0.3s ease;
} 

.request:hover {
    background-color: #fff;
    color: #000;
    transition: 0.3s ease;
}

.fab {
    cursor: pointer;
}

.fab.fa-viber {
    color: #EC17FF;
    width: 17px;
    height: 17px;
    margin-left: 20px;
    transition: 0.3s linear;
}

.fab.fa-viber:hover, .fab.fa-telegram-plane:hover, .fab.fa-whatsapp:hover {
    transform: scale(1.5);
    -webkit-filter: brightness(170%);
    transition: 0.3s linear;
}



.fab.fa-telegram-plane {
    color: #2DC2FF;
    width: 17px;
    height: 17px;
    margin-left: 10px;
    transition: 0.3s linear;
}

.fab.fa-whatsapp {
    color: #2FFFBF;
    width: 17px;
    height: 17px;
    margin-left: 10px;
    transition: 0.3s linear;
}

весь код од https://jsfiddle.net/92x7pqa3/
Сам сайт tempesv0.beget.tech