How to evenly space items of different lengths

Question

I just noticed that having justify-content: space-evenly; spaces items from the middle, so items that are longer than another, create an uneven space between the items.

I tried space-around, which I assumed should solve it, but same issue.

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  text-align: center;
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
}

.nav {
  position: sticky;
  left: 0;
  border-radius: 0px;
  border: none;
  margin-right: 10%;
  margin-left: 10%;
  width: 80%;
  text-align: center;
  padding: 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
  cursor: default;
}

@media screen and (max-width: 1000px) {
  .nav {
    position: sticky;
    left: 0;
    border-radius: 0px;
    border: none;
    margin: auto;
    width: 100%;
    text-align: center;
    padding: 0;
    flex-direction: row;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
  }
}

<nav>
  <ul class="nav">
    <li class="item">
      <a href="index.html">
        <img src="../Images/Navigation/Intak Nav Mark.png" alt="Home" />
      </a>
    </li>
    <li class="item" style="color:#4D4D4D;">Printing
    </li>
    <li class="item"><a href="Graphic Design.html">Graphic Design</a>
    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
        <li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
        <li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
        <li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
        <li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
        <li><a href="Calendars/Lucky Money Envelopes.html">Lucky Money Envelopes</a></li>
        <li><a href="Calendars/More.html">More Calendars</a></li>
      </ul>
    </li>
    <li class="item"><a href="Contact Us.html">Contact Us</a></li>
  </ul>
</nav>

I'm trying to get the items to have an even gap between them, regardless of length of item

Answer 1

This should solve it

justify-content:space-between;