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

Я только начал изучать 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;
}

<header>
  <nav class = "navbar">
    <ul>
      <li><a href = "home.html">Home</li>
      <li><a href = "projects.html">Projects</li>
      <li><a href = "about.html">About</li>
    </ul>
  </nav>
</header>

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

https://thewikihow.com/video_f3uCSh6LIY0&t=232s

Навигация в видео:

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

🤔 А знаете ли вы, что...
HTML использует мета-теги для определения метаданных страницы, таких как заголовок и описание.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Padding301 вопрос Nav233 вопроса

Ответы:

Ваша проблема возникает из-за того, что вы не закрываете теги <a>.

Для баров <nav> не требуются теги <ul> и <li>... только теги <a>. В результате получится более простая структура, более надежная и доступная. Посмотрите этот фрагмент.

nav {
  background-color: #131842;
}

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

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

<header>
  <nav>
    <a href = "home.html">Home</a>
    <a href = "projects.html">Projects</a>
    <a href = "about.html">About</a>
  </nav>
</header>

Решено

Не забудьте добавить закрывающий тег </a>. Вот валидатор разметки, с помощью которого вы сможете проверить свои будущие работы — https://validator.w3.org/

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;
}

<header>
  <nav class = "navbar">
    <ul>
      <li><a href = "home.html">Home</a></li>
      <li><a href = "projects.html">Projects</a></li>
      <li><a href = "about.html">About</a></li>
    </ul>
  </nav>
</header>

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

Ответы:

Интересные вопросы для изучения