如何减少移动导航栏中链接之间的空间

Question

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

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

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

我试图改变边距和填充，但链接之间仍然有很大的空间。 我认为问题出在身高上。 这是它的图像：