I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white space.
Here is the HTML I am using:
<div className="first-layer">
<div className="background-wrapper">
<Navbar></Navbar>
{/* <Overview></Overview> */}
</div>
</div>
This is my navbar code:
<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 is the CSS being used:
*{
margin: 0;
padding: 0;
}
.background-wrapper {
height: 100vh;
width: 100%;
background-image: linear-gradient(to top,
rgba(41, 0, 37, 0.5),
/* more gradients */
);
/* other styles */
}
.navbar-container{
display: flex;
/* other styles */
}
/* Other styles for Navbar */
.left-overview{
/* comment out */
}
.right-overview{
/* other styles */
}
My question is, how can I ensure that the background always shrinks regardless of the elements and page size?