Невозможно получить <a>элементов до высоты навигационной панели

Question

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

#navbar {
   display: flex;
   justify-content: flex-end;
   width: 100%;
   top: 0;
   left: 0;
   padding: 0;
   position: fixed;
   background-color: slategray;
}

#nav-list {
   display: flex;
   margin-right: 5rem;
   list-style: none;
}

#nav-list a {
   display: block;
   padding: 1rem;
   color: white;
   font-size: 1.5rem;
   text-decoration: none;
   border: 1px solid black;
}

#nav-list a:hover {
   background: grey;
}

<nav id="navbar">
   <ul id="nav-list">
      <li><a>item1</a></li>
      <li><a>item2</a></li>
      <li><a>item3</a></li>
   </ul>
</nav>

РЕДАКТИРОВАТЬ: Спасибо всем за быстрый ответ, маржа была проблемой, и, клянусь, я играл с этим, и это ничего не изменило. Я ценю все возможные решения, которые разрешили эту проблему и научили меня поведению ul margins по умолчанию!

Answer 1

Замените правило margin-right в наборе правил #nav-list полным правилом маржи: margin: 0 5rem 0 0;. Это сбросит стиль браузера по умолчанию и заставит его работать так, как вы хотели.

#navbar {
   display: flex;
   justify-content: flex-end;
   width: 100%;
   top: 0;
   left: 0;
   padding: 0;
   position: fixed;
   background-color: slategray;
}

#nav-list {
   display: flex;
   /*margin-right: 5rem; instead of this*/
   margin: 0 5rem 0 0; /*use this*/
   list-style: none;
}

#nav-list a {
   display: block;
   padding: 1rem;
   color: white;
   font-size: 1.5rem;
   text-decoration: none;
   border: 1px solid black;
}

#nav-list a:hover {
   background: grey;
}

<nav id="navbar">
   <ul id="nav-list">
      <li><a>item1</a></li>
      <li><a>item2</a></li>
      <li><a>item3</a></li>
   </ul>
</nav>

Answer 2

Если вас интересует только высота, просто удалите margin-top и margin-bottom из # nav-list.

Попробуйте следующее:

#nav-list {
   display: flex;
   list-style: none;
   margin: 0 80px 0 16px;
}

Answer 3

Теперь это будет работать ...

#navbar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  top: 0;
  left: 0;
  padding: 0;
  position: fixed;
  background-color: slategray;
}

#nav-list {
  margin: 0;          /*added*/
  display: flex;
  margin-right: 5rem;
  list-style: none;
}

#nav-list a {
  display: block;
  padding: 1rem;
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  border: 1px solid black;
}

#nav-list a:hover {
  background: grey;
}

<nav id="navbar">
  <ul id="nav-list">
    <li><a>item1</a></li>
    <li><a>item2</a></li>
    <li><a>item3</a></li>
  </ul>
</nav>

Answer 4

ul по умолчанию имеет margin-block-start: 1em и margin-block-end: 1em.

Чтобы исправить это, добавьте margin: 0 к #nav-list.

#nav-list { 
  display:flex; 
  margin:0; 
  margin-right: 5rem; 
  list-style: none 
}