How to evenly space items of different lengths - html

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">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</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;