Прыгает верстка при наведение на ссылку

Рейтинг: 0Ответов: 1Опубликовано: 14.01.2023

подскажите по двум вопросам

  1. прыгает меню при наведение на ссылку, подскажите в чем может быть проблема? я новенький)
  2. Подскажите правильно ли я разметил классы в html если следовать БЭМ? Подскажите если где-то логику не правильную сделал
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Denis Novik</title>
    <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
    <section class="promo">
        <div class="container">
            <div class="promo__header">
                <ul class="promo__header-nav">
                        <li class=""><a href="#" class="link">Home</a></li>
                        <li class=""><a href="#" class="link">About me</a></li>
                        <li class=""><a href="#" class="link">Skills</a></li>
                        <li class=""><a href="#" class="link">Portfolio</a></li>
                        <li class=""><a href="#" class="link">Contacts</a></li>
                </ul>
            </div>
            <div class="divider"></div>
        </div>
    </section>
</body>
</html>

.promo {
    padding-top: 33px;
    &__header {
        &-nav {
            display: flex;
            justify-content: space-evenly;
            list-style-type: none;
            .link {
                text-decoration: none;
                color: #828282;
                &:hover {
                    color: #070707;
                    font-family: 'Bold';
                    font-size: 18px;
                    transition: 0.3s;
                }
            }
        }
    }
    .divider {
        width: 940.6px;
        border: 1px solid #828282;
        margin-top: 32px;
    }
}
css
Источник: Stack Overflow на русском

Ответы

▲ 0
 &:hover {
                    color: #070707;
                    font-family: 'Bold';
                    font-size: 18px;
                    transition: 0.3s;
                }

у вас скорей всего на :hover font-size больше, чем на обычном a, по этому размер и меняется