Почему смещаются соседние элементы при hover?

Question

[Roma Ishutin]

Есть горизонтальный список меню, при наведении на элемент шрифт становится жирным, но при этом смещаются соседние элементы.

<nav class="menu">
        <ul class="menu__list">
            <li class="menu__item">
                <a href="#">
                    Главная
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    Характеристики
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    Галерея
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    Отзывы
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    Контакты
                </a>
            </li>
        </ul>
    </nav>

.menu__list{
    display: flex;
    justify-content: start;
    list-style: none;
}
.menu__item{
}
.menu__item a{
    flex-grow: 1;
    flex-basis: 0;
    margin: 0 20px;
    text-decoration: none;
    font-weight: 500;
    color: #3F3F3F;
}
.menu__item a:hover{
    text-decoration: underline;
    font-weight: 700;
}

Answer 1

[Andrey Vasilev]

фикс ширина

или
текст шадоу