Как правильно прописать масштабирование текста при наведении курсора?

Question

[Soul1]

Задал масштабирование текста через transform: scale(1.1), но при наведении на него курсора блок с текстом хоть и масштабируется, но сдвигается вниз, т.е. расширяется вправо, влево и вниз, а сверху будто упирается в ограничение.

CSS

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Caveat&display=swap')

div a {
    display: block;
    text-align: center;
}

div {
    display: block; /* Объявляем, что блок с меню - это именно блок */
    text-align: center;
    background-color: red;
}

div a {
    border: 1px solid #000; /* Рамка вокруг текста */
    padding: 3px; /* Поля вокруг текста */
    border-radius: 10px; /* Скругление углов блока */
    background-color: #9DC9EB; /* Цвет фона */
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
    font-family: 'Balsamiq Sans', cursive;
}

a:hover {
    color: #FFFFFF; /* Изменение цвета текста на белый при наведении на него курсора */
    display: inline-block;
    transform: scale(1.1);
}

HTML

<div class="menu">
    <a class="menu1" id="main" href="http://127.0.0.1:8000/">Меню1</a>
    <a class="menu1" id="about" href="http://127.0.0.1:8000/about">Меню2</a>
    <a class="menu1" id="rules" href="http://127.0.0.1:8000/rules">Меню3</a>
</div>

Answer 1

[Юрий]

Перенесите display: inline-block в стили к div a и поставьте точку с запятой после импорта шрифта, а то сейчас у вас первое правило вообще не работает:

Comments

[Soul1]

Спасибо огромное! Очень выручили.

Answer 2

[maxhd]

При ховере устанавливается display, может сразу его установить?

div a {
    display: inline-block;
   /*....*/
}
a:hover {
    transform: scale(1.1);
   /*....*/
}

Comments

[Soul1]

Вы правы!