当视口缩小到导航项分为两行时，在导航和子菜单之间创建间隙

Question

当查看端口为屏幕的整个宽度时，导航栏和子菜单会完美对齐。但是，当我导航到“中文日历”导航栏变为两行的720px时，它将在导航栏和子菜单下拉菜单之间创建间隙。 我尝试过移动代码并删除内容，但无法弄清楚。我尝试过float：right ;，但创建了一个重叠区域，而不是恰好位于下方。

* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.nav {
  position: sticky;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  width: 100%;
  padding: 10px 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: capitalize;
  width: 25%;
  text-align: center;
}

.submenu {
  display: none;
  flex-wrap: wrap;
  margin-top: 29px;
  align-items: center;
  align-text: center;
  position: absolute;
  padding: 10px;
  font-size: small;
  left: 0;
  right: 0;
  text-transform: capitalize;
  z-index: 1;
  background-color: #2F4F4F;
  color: white;
  justify-content: left;
}

.submenu li {
  margin-left: 6%;
  width: 19%;
  padding: 5px;
}

.submenuActive {
  display: flex;
  cursor: pointer;
  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, .9);
}


/*.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);
}*/

ul {
  list-style: none;
  padding: 0;
}

.logo {
  display: block;
  margin-top: 50px;
  margin-bottom: 25px;
}

.logo img {
  display: block;
  margin: auto;
  max-width: 70%;
}

<a class="logo" href="index.html">
  <img src="../../Images/Navigation/Intak Logo 40px High.png" alt="Home" />
</a>

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

我需要它，因此无论视口大小如何，子菜单始终会触摸导航栏

https://jsfiddle.net/nqjv3xs5/1/#&togetherjs=lgy6QvwL4g

大于720像素：

小于720像素：