Html – how to remove the white space in my navbar?

there is some white space in my nav bar. i don’t know if i should add padding and make it 0px. i copied the code from another website and made some edits but their navbar goes across the whole page.

i was also wondering if there’s any way i can show what the nav bar covers or if i can create a space between the nav bar and the page since when i click on some of my tabs, the nav bar covers it.

codepen

<title> Local Bakery: Sweet Tooth! </title>
<header>
  <div class="banner">
    <marquee>Get free delivery on <s>orders over $50</s> ALL ORDERS!</marquee>
  </div>
  <nav>
    <div class="logo">
      <img src="https://i.postimg.cc/5NJBbntN/Nude-and-Black-Modern-Bakery-Logo.png" width="75" height="75" alt="logo"> Sweet Tooth
    </div>
    <ul class="navmenu">
      <li><a href="#bread"> Bread </a>
        <ul class="subnav">
          <li><a href="#bagels"> Bagels </a></li>
          <li><a href="#knots"> Knots </a></li>
          <li><a href="#loaf"> Loaves </a></li>
        </ul>
      </li>
      <li><a href="#desserts"> Desserts </a>
        <ul class="subnav">
          <li><a href="#babka">Babka</a></li>
          <li><a href="#cake">Cakes and Cheesecake</a></li>
          <li><a href="#churros">Churros</a></li>
          <li><a href="#cinrolls">Cinnamon Rolls </a></li>
          <li><a href="#cookies">Cookies</a></li>
          <li><a href="#donuts">Donuts</a></li>
          <li><a href="#muffins">Muffins</a></li>
          <li><a href="#pie">Pies</a></li>
          <li><a href="#turnovers">Turnovers</a></li>
          <li><a href="#waffles">Waffles</a></li>
        </ul>
      </li>
      <li><a href="#others">Filipino Desserts</a>
        <ul class="subnav">
          <li><a href="#biko">Biko</a></li>
          <li><a href="#cassava">Cassava Cake</a></li>
          <li><a href="#halo">Halo Halo</a></li>
          <li><a href="#leche">Leche Flan</a></li>
          <li><a href="#puto"> Puto</a></li>
        </ul>
      </li>
      <li><a href="#about">About Us</a></li>
    </ul>
  </nav>
</header>
<section class="bread">
  <h1 id="bread"> Bread </h1>
  <h2 id="bagels"> Bagels </h2>
  <h2 id="knots"> Knots </h2>
  <h2 id="loaf"> Loaves </h2>
</section>
<section class="desserts">
  <h1 id="desserts"> Desserts </h1>
  <h2 id="babka"> Babka </h2>
  <h2 id="cake"> Cakes and Cheesecake </h2>
  <h2 id="churros"> Churros </h2>
  <h2 id="cinrolls">Cinnamon Rolls</h2>
  <h2 id="cookies">Cookies</h2>
  <h2 id="donuts">Donuts</h2>
  <h2 id="muffins">Muffins</h2>
  <h2 id="pie">Pie</h2>
  <h2 id="turnovers">Turnovers</h2>
  <h2 id="waffles">Waffles</h2>
</section>
<section class="filipino">
  <h1 id="others"> Filipino Desserts </h1>
  <h2 id="biko"> Biko </h2>
  <h2 id="cassava">Cassava Cake </h2>
  <h2 id="halo">Halo Halo </h2>
  <h2 id="leche">Leche Flan</h2>
  <h2 id="puto">Puto</h2>
</section>
<section class="about">
  <h1 id="about"> About Us </h1>
</section>

body {
  font-family: Archivo, sans-serif;
  font-weight: 500;
  width: 100vw;
  overflow-x: hidden;
}
marquee {
  text-shadow: 4px 1px 0px lightcoral;
  font-size: 14px;
  color: #627254;
}

header {
  position: sticky;
  top: 0;
}

.banner {
  background: #efbc9b;
  color: #627254;
  font-size: 14px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav {
  font-weight: 600;
  height: 80px;
  background: #ffcad4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

ul.navmenu {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  position: relative;
  top: 0;
}

.navmenu a {
  font-size: 16px;
  text-decoration: none;
  color: black;
}

.navmenu li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.navmenu li a {
  position: relative;
  padding: 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-items: center;
}

.navmenu li:hover ul.subnav {
  visibility: visible;
  opacity: 1;
  top: 64px;
  transition: 0.6s ease-in-out;
}

.navmenu li ul.subnav {
  visibility: hidden;
  position: absolute;
  display: flex;
  flex-direction: row;
  background: #fae7f3;
  border-radius: 12px;
  opacity: 0;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}
::-webkit-scrollbar {
  width: 17px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background: lightpink;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e493b3;
}