CSS стиль создает поле для наведения рядом с моим тегом, а не над ним

Question

Я полностью озадачен - я слежу за онлайн-курсом и не могу выбрать то, что отличается от моего учителя. Я пытаюсь сделать зеленую рамку над каждой из ссылок, когда вы наводите на них курсор. В настоящее время я получаю окно, но только слева от ссылки

Пытался поделиться полными HTML и CSS, но слишком большим, вопрос не будет опубликован. Пожалуйста, дайте мне знать, если вам нужно больше информации, спасибо

#navbar {
  display: flex;
  position: sticky;
  top: 0;
  background: #333;
  color: #fff;
  justify-content: space-between;
  z-index: 1;
  padding: 1rem;
}  

#navbar ul {
  display: flex;
  align-items: center;
  list-style: none;
}

#navbar ul li a {
  color: #fff;
  padding: 0.75rem;
  margin: 0 0.25rem;
}

#navbar ul li a:hover {
  background: #93cb52;
  border-radius: 5px;
}

  <nav id="navbar">
    <h1 class="logo">
    <span class="text-primary">
      <i class="fas fa-book-open"></i> Edge 
    </span>Ledger
    </h1>
    <ul>
      <li><a href="#home"></a>Home</li>
      <li><a href="#what"></a>What</li>
      <li><a href="#who"></a>Who</li>
      <li><a href="#contact"></a>Contact</li>
    </ul>
  </nav>

Answer 1

Ты не далеко! Я думаю, что ваша проблема в том, что вы не поместили текст ссылки внутри ссылки. Например, Home должен быть внутри элемента a, а не справа от него. Поэтому <li><a href="#home"></a>Home</li> должно стать <li><a href="#home">Home</a></li>.

. Это приведет к появлению подчеркиваний в ссылках, которые можно отключить, добавив text-decoration: none в селектор #navbar ul li a.

Полный код будет выглядеть так:

#navbar {
  display: flex;
  position: sticky;
  top: 0;
  background: #333;
  color: #fff;
  justify-content: space-between;
  z-index: 1;
  padding: 1rem;
}  

#navbar ul {
  display: flex;
  align-items: center;
  list-style: none;
}

#navbar ul li a {
  color: #fff;
  padding: 0.75rem;
  margin: 0 0.25rem;
  text-decoration: none;
}

#navbar ul li a:hover {
  background: #93cb52;
  border-radius: 5px;
}

 <nav id="navbar">
    <h1 class="logo">
    <span class="text-primary">
      <i class="fas fa-book-open"></i> Edge 
    </span>Ledger
    </h1>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#what">What</a></li>
      <li><a href="#who">Who</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

Удачи!

Answer 2

Это просто опечатка в вашем коде

В вашем html вы должны поместить текст ссылки внутри a тега не внутри li тега

Так же сделайте это

<li><a href="#home">Home</a></li>
<! - - instead of doing that
  <li><a href="#home"></a>Home</li>
-->