Проблема с заполнением при создании панели навигации. ⇐ CSS

[Anonymous]

Я только что начал работать с HTML и CSS и хочу создать панель навигации. Я столкнулся с проблемой: при наведении на ссылку под каждой из моих ссылок появляется странное дополнение, как показано на рисунках. Есть ли способы решить эту проблему, не удаляя отступы?



Браузер: Microsoft Edge 126.0.2592.87

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

h1 {
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-weight: normal;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #131842;
}

.navbar a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
}

.navbar a:hover {
background-color: #405D72;
}

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

[list]
[*]Home
[*]Projects
[*]About
[/list]

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

Панель навигации в видео:



Подробнее здесь: https://stackoverflow.com/questions/787 ... gation-bar