Alignment not working for all submenu items - html

Question

The items are evenly spaced to flex containers in all menus except the Chinese calendars tab, I don't understand why.
They were aligned perfectly, but when I added links to the submenu items, it spread out randomly. I'm almost certain I have to add something in a{} to correct this, but I've tried the following, but no fix:
Tried erasing the links. No fix.
Tried copying the code from the submenu into a{} in CSS, worsens the problem.
* {
font-family: arial, sans-serif;
box-sizing: border-box;}
html, body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.nav {
position:fixed;
top:0;
left:0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
padding: 25px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
ul {
list-style: none;
padding: 0;
}
<nav>
<ul class="nav">
<li class="item">
<a href="../index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Printing
<ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul>
</li>
<li class="item has-children">Graphic Design
<ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>
</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>Packet Calendars</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>
Expected results is all nav submenu items to be aligned

Answer 1

You just have to change justify-content: space-evenly; to justify-content: left; for the .item.has-children:hover .submenu style.
The submenu style should be like this:
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
As for the Chinese Calendar's submenu, there are only 7 items, which cause it to have 4 on the first row and 3 on the second row, thus causing them to look like they're not aligned because the space-evenly style cause them to be centered with even space.
It isn't related to the links.
By setting them to left, it will prevent the white space on the left messing up with the position of the 2nd row.
Before and after (with red border visualizing the boxes)
justify-content: space-evenly;
justify-content: left;