Избегайте смещения макета при изменении толщины шрифта ⇐ Html

[Anonymous]

У меня есть POC, который вызывает сдвиг макета только при наведении курсора на определенное слово, но я не могу понять, почему/что именно вызывает сдвиг.
Если я наведу курсор на текст Three, макет сместится; при наведении курсора на любой другой элемент не произойдет сдвиг.
Я знаю, что это как-то связано с отображением: flex элемента div, но не могу понять, почему это вызывает сдвиг.

Код: Выделить всё

div {
display: flex;
}

nav {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
font: 120% system-ui;
text-align: center;
padding: 2rem 1rem;
}
a {
text-decoration: none;
color: black;
}
a:hover {
font-weight: 900;
}

Код: Выделить всё

One
Two
Three
Four

Почему это происходит и как этого избежать, не удаляя display: flex из div?

Подробнее здесь: https://stackoverflow.com/questions/777 ... ont-weight