Получение пробела между элементами списка navbar

Question

Я пытаюсь создать навигационную панель, но у меня проблема с получением пробела между элементами списка. Я пытался использовать justify-content: space-between; но это не решило это. Я использую CSS flexbox, и вот как я это сделал:

.NorMenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header {
  background-color: black;
}

nav {
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

li a {
  color: red;
}

<header id="header">
  <nav>
    <ul class="NorMenu">
      <div class="logo"><a href="index.html">Logo</a></div>
      <li><a href="index.html">Home</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li><a href="elements.html">About</a></li>
    </ul>
  </nav>
</header>

Answer 1

Не уверен, сколько места вам нужно, но у вас слишком много гибких вложений, и вам это кажется ненужным. Я удалил свойства flex на nav.

Ваш html также был недействительным, так как ul не может содержать div теги

Проблема, до которой вы вложили 2 элемента flex, создающих 2-й элемент становится гибким дочерним элементом первого гибкого контейнера, а первый гибкий контейнер имеет пространство для выравнивания содержимого между эффективным созданием ширины вашего второго гибкого контейнера (дочернего элемента первого контейнера) менее 100%

.NorMenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header {
  background-color: black;
}

nav {
  padding-top: 5rem;
  text-transform: uppercase;
}

li a {
  color: red;
}

<header id="header">
  <nav>
    <ul class="NorMenu">
      <li class="logo"><a href="index.html">Logo</a></li>
      <li><a href="index.html">Home</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li><a href="elements.html">About</a></li>
    </ul>
  </nav>
</header>

Answer 2

просто установите width: 100% для класса .NorMenu.

.NorMenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#header {
  background-color: black;
}

nav {
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

li {
  padding: 4px 16px;
}

li a {
  color: red;
}

<header id="header">
  <nav>
    <ul class="NorMenu">
      <div class="logo"><a href="index.html">Logo</a></div>
      <li><a href="index.html">Home</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li><a href="elements.html">About</a></li>
    </ul>
  </nav>
</header>

Answer 3

.NorMenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header {
  background-color: black;
}

nav {
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}   

li a {
  color: red;
}

ul{
  width:100%;
}

<header id="header">
  <nav>
    <ul class="NorMenu">
      <div class="logo"><a href="index.html">Logo</a></div>
      <li><a href="index.html">Home</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li><a href="elements.html">About</a></li>
    </ul>
  </nav>
</header>