html - 如何使用 Flexbox 在导航栏中均匀间隔 <li> 元素？ HTML

Question

我正在尝试为投资组合网站创建一个简单的导航栏。我的 HTML 和 CSS 在下面。我不知道如何均匀地间隔“li”元素。我无法将 justifiy-content:space-evenly 应用于 UL，因为相同的代码正在应用于 '''div class="headerContainer'''

.headerContainer {
    display: flex;
    background-color: lightblue;
    justify-content: space-between;
    align-items: center;
}

ul {
    list-style-type: none;
    display: flex;

}

li a {
    text-decoration: none;
}

<header>
    <div class="headerContainer">
        <div class="logo">Robert Emmet</div>
        <nav>
            <ul>
                <li><a href="#" class="">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </nav>
    </div>
</header>

Answer 1

.headerContainer {
  display: flex;
  background-color: lightblue;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}



nav {
  width: 100%;
}

<header>
  <div class="headerContainer">
    <div class="logo">Robert Emmet</div>
    <nav>
      <ul>
        <li><a href="#" class="">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>