我想减少我的链接之间的空间，但它会自动设置它们之间的空间，无论我做什么都不会让我改变空间。

@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>

我试图改变边距和填充，但它仍然有链接之间的大空间.我认为问题是关于高度的东西.这里是它的图像：