Как мне расположить элементы навигации в центре моей навигации?

Question

Я не могу понять, почему мои элементы мобильной навигации (зеленые поля) не центрируются.

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

Обертка тега body - это черный прямоугольник на изображении.

  @media screen and (max-width: 740px) {
  nav {
    display: block;
    background-color: red;
  }
  ul {
    display: flex;
    flex-direction: column;
    border: solid;
    border-color: blue;
  }
  .individual_nav_item {
    border: solid;
    border-color: lawngreen;
    text-decoration: none;
    color: black;
  }

<nav>
  <button onclick="toggleNav()" id="mobileNav" class="hamburger hamburger--slider" type="button">
    <span class="hamburger-box" >
      <span class="hamburger-inner"> </span>
    </span>
  </button>

  <ul>
    <a href="/index.html" class="individual_nav_item">Home</a>
    <a href="/about_us.html" class="individual_nav_item">About Us</a>
    <a href="#" class="individual_nav_item">FAQ</a>
    <a href="#" class="individual_nav_item">Contact</a>
  </ul>
</nav>

Answer 1

Показывает ли следующее CSS, чего вы пытаетесь достичь?

@media screen and (max-width: 740px) {


nav {
    display: block;
    background-color: red;
  }

  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    align-items: center;
    border: solid;
    border-color: blue;
  }

  .individual_nav_item {
    border: solid;
    border-color: lawngreen;
    text-decoration: none;
    color: black;
    width: 100%;
  }