Html – CSS responsive background

I’m trying to learn on making responsive website and right now I come up with this problem where when I shrink the website horizontally to a width just right before the edge of the screen touches one of the element, the background also shrinks , leaving a white space.

I am using this html

        <div className="first-layer">
            <div className="background-wrapper">
                <Navbar></Navbar>
                {/* <Overview></Overview> */}
            </div>
        </div>

with this as navbar

        <div className="navbar-container">
            <div className="logo">Razark</div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="TierList">Tier List</a></li>
                <li><a href="About">Blog</a></li> 
                <li><a href="About">About</a></li> 
            </ul>
        </div>

and this css:

*{
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}
.background-wrapper {
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to top, 
        rgba(41, 0, 37, 0.5),
        rgba(47, 2, 43, 0.5),
        rgba(54, 0, 49, 0.5),
        rgba(62, 2, 56, 0.5),
        rgba(69, 2, 62, 0.5),
        rgba(71, 1, 67, 0.5),
        rgba(74, 1, 71, 0.5),
        rgba(76, 0, 76, 0.5),
        rgba(73, 0, 80, 0.5),
        rgba(69, 0, 84, 0.5),
        rgba(64, 0, 88, 0.5),
        rgba(58, 1, 92, 0.5)
    );
    background-size: cover;
    position: absolute;
    background-position: center;
    background-attachment: fixed;
}

.navbar-container{
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 999px;
    justify-content: space-between;
    /* border: 3px solid red; */
}
.navbar-container ul{
        /* border: 3px solid red; */
    background-color: rgba(41, 0, 37, 0.3);
    border-radius:999px ;
    margin-right: 30px;
    display: flex;
    justify-content: space-between;
}
.navbar-container ul li{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar-container ul li a {
    font-family: 'Lobster', cursive;
    font-size: 18px;

    color: white;
    padding:0px 30px 0px 30px;
    text-decoration: none;  
}

.navbar-container ul li a:hover{
    color: #0affc2;
}
.logo{
    display: flex;
    flex-wrap: wrap; 
    padding-left: 30px;
    color: white;
    font-weight: 48px;
    font-family: 'Pacifico', cursive;
    font-size: 36px;
}

.Overview{
    /* column-gap: 2rem;
    column-count: 2; */
}

.left-overview{
    /* border: 3px solid red; */
}
.right-overview{
    line-height: 1.5;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    /* border: 3px solid red; */
    margin: 0px 0px 0px 0px;
}

How do i make the background always shrink no matter the elements and size of the page