响应式网站背景适配问题：解决页面缩小时背景留白问题

我正在学习制作响应式网站，目前遇到一个问题：当横向缩小页面宽度至即将触碰到页面元素时，背景也会收缩，导致出现留白。

我的HTML结构如下：

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

Navbar组件的HTML结构：

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

对应的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;
}

1. 修复背景容器的定位与宽度 #

把background-wrapper的绝对定位改为相对定位，同时将固定宽度替换为最小宽度，确保背景容器能跟随内部元素宽度扩展，不会出现留白：

.background-wrapper {
    height: 100vh;
    min-width: 100%; /* 替换原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: relative; /* 替换原position:absolute */
    background-position: center;
    background-attachment: fixed;
}

2. 让根容器跟随内容自适应 #

给最外层的first-layer设置最小宽度，确保它能包裹住所有内部元素，背景容器也会随之适配：

.first-layer {
    min-width: fit-content;
}

3. 优化导航栏的响应式表现 #

当前导航栏在窄屏会因固定边距挤压变形，添加换行属性并调整边距，避免溢出：

.navbar-container{
    display: flex;
    flex-wrap: wrap; /* 添加换行 */
    gap: 1rem; /* 换行后元素间距 */
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 999px;
    justify-content: space-between;
    padding: 0 1rem; /* 替换左右margin为padding，避免窄屏溢出 */
}
.navbar-container ul{
    background-color: rgba(41, 0, 37, 0.3);
    border-radius:999px ;
    margin-right: 0; /* 去掉右侧固定margin */
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0; /* 优化换行后的上下内边距 */
}

4. 启用盒模型优化 #

取消注释box-sizing: border-box，让元素的padding和border不会额外撑大容器宽度，减少溢出风险：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 启用盒模型 */
}

内容的提问来源于stack exchange，提问作者Razark