Html – My navbar lies flat on its border when the window is being scrolled

I made the position of my navbar to be fixed in other to enable it stay in position when the window is being scrolled but for some reason when I scroll through, all the constituents of the nav bar lie flat on the border. I need a little space between the components of the navbar and the bottom border line.

HTML

<nav>
  <div class="container nav_container">
    <a href="index.html" class="nav_logo"
      ><img src="images/navlogo.png" alt="Nav Logo"
    /></a>
    <ul class="nav_links">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#exhibitions">Exhibitions</a></li>
    </ul>
    <ul class="nav_socials">
      <li>
        <a href="https://instagram.com/" target="_blank"
          ><i class="fa-brands fa-instagram"></i
        ></a>
      </li>
      <li>
        <a href="https://X.com/" target="_blank"
          ><i class="fa-brands fa-x-twitter"></i
        ></a>
      </li>
      <li>
        <a href="https://youtube.com/" target="_blank"
          ><i class="fa-brands fa-youtube"></i
        ></a>
      </li>
      <li>
        <a href="https://email.com/" target="_blank"
          ><i class="fa-solid fa-envelope"></i
        ></a>
      </li>
    </ul>
    <button class="nav_toggle-btn" id="nav_toggle-open">
      <i class="fa-solid fa-bars"></i>
    </button>
    <button class="nav_toggle-btn" id="nav_toggle-close">
      <i class="fa-solid fa-x"></i>
    </button>
  </div>
</nav>

CSS

.container {
    width: var(--container-width-lg);
    margin: 0 auto;  /* this property centers it horizontally*/
    max-width: 2160px;
}

img {
    display: block; /* takes the entire width*/
    object-fit: cover;
    width: 100%;
}

nav {
    height: 5rem; /* by default it is 16px. 16px multiplied by 5 gives 5rem)*/
    width: 100vw;
    display: grid; /*Grid allows you to easily resize and reposition a grid container and its items two-dimensionally. "Two-dimensionally" means grid modules allow simultaneous laying out of box models in rows and columns.*/
    place-items: center; /*this is a shorthand for align-items and justify-content*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99; /*this specifies the stack order of the navbar; in this case it sits on top of everything on the page*/ 
}

/*nav class on scroll using javascript*/
.window-scrolled {
    background: var(--color-bg-2);
    border-bottom: 0.2rem solid var(--color-bg-3);
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
}
.nav_container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav_toggle-btn{
    display: none; /*this will be displayed on tablets and phones*/
}

.nav_logo{
    width: 7.5rem;

}

.nav_links{
    display: flex;
    gap: 4rem;
}

.nav_socials{
    display: flex;
    gap: 1.5rem;
}

.nav_socials a {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(var(--color-primary-variant), var(--color-primary));
    border-radius: 0.5rem;
    color: var(--color-bg-4);
    display: grid;
    place-items: center;
    /*aspect-ratio: 1/1; the height and width will always be equal*/
}

.nav_socials a:hover{
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.4);
}

JavaScript

window.addEventListener("scroll", () => {
  document
    .querySelector("nav")
    .classList.toggle("window-scrolled", window.scrollY > 0);
});

From the image above, it is quite clear that all the items in the navbar; navlogo, ul list and the icons all lie flat on the border when the window is scrolled. I would like a little space between the items and the border