Как сделать, чтоб при наведении элемент не смещал другие элементы?

Html
---------
<nav class="menu">
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__list-link" href="#">Главная</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Наши работы</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Стоимость</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#">Контакты</a>
</li>
</ul>
</nav>
---------
---------
css
---------
.menu {
&__list {
padding: 17px 95px 18px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
border-radius: 15px;
}

&__list-item {

}

&__list-link {
text-decoration: none;
color: #212121;
font-size: 22px;
line-height: 27px;
&:hover {
color: #FF5B14;
font-weight: 500;
}
}
}


При наведение на какой то из пунктов списка, он сдвигает другой пункт списка.
Как сделать, что б этого не случалось?
Уже многие варианты перепробывал, ничего не работает. В интернете смотрел, ничего не нашел нормального для решения моей проблемы.

Открою секрет: ссылка

Наверное, колхоз, но работает
ссылка

IFgeny, Оно получится не так, как в макете нужно, лишнии отступы и + если навести на пустое место возле елемента, то он отмечается, можно нажать

Изменил.
Лишние отступы получаются потому что у вас у родителя паддинги указаны. Уберите их и все.

Интересно, мне уже можно писать в резюме: Адаптивная верстка любой сложности или еще рановато )

Можно использовать text-shadow как вариант..

.menu__list-link:hover {
color: #FF5B14;
text-shadow: 1px 1px 2px #FF5B14;
}

MasterRoman, держи норм вариант, но это хак по сути, ссылка

Это можно сделать через псведоэлемент , текст прописать в атрибут,  а контент в псевдоэлементе брать из атрибута  

content: attr(title);

sha9, тоже вариант особенно хорошо для СЕО