how to decrease the space between links in mobile navbar

I want to decrease the space between my links, but it's automatically setting room between them and won't let me change the space no matter what I do.

@media screen and (max-width:991px) {
  #menu-btn {
    display: inline-block;
  }
  .header .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    background: #13131a;
    width: 25rem;
    height: 100vh;
    align-items: flex-start;
  }
  .header .navbar a {
    color: #fff;
    display: block;
    margin: 2rem;
    padding: 0.5rem;
    font-size: 3rem;
  }
}

<header class="header">
  <a class="logo" asp-action="Index">
    <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" width="60" alt="logo" />
  </a>
  <div class="navbar nav">
    <a asp-action="Index">Home</a>
    <a href="#products">Products</a>
    <a href="#about">About Us</a>
    <a href="#contact">Contact Us</a>
  </div>
  <div class="icons">
    <i class="fa-solid fa-cart-shopping "></i>
    <i class="fa-solid fa-magnifying-glass "></i>
    <i class="fa-solid fa-right-to-bracket "></i>
    <i class="fa-solid fa-bars " id="menu-btn"></i>
  </div>
  <div class="search-form">
    <input type="search" id="search-box" placeholder="جستجو..." />
    <label for="search-box" class="fa-solid fa-magnifying-glass"></label>
  </div>
</header>

I tried to change the margin and padding, but it still has that large space between the links. I think the problem is something about the height. here is the image of it:

enter image description here

Solution

You didn't set flex-direction and justify-content for your .navbar. These should be flex-direction: column and justify-content: flex-start to place all items at the top of a column, i.e. directly above each other.