如何让容器内的USP区块背景色铺满全屏？

我完全懂你的困扰——现在你的.usp-section被嵌套在带左右6rem内边距的.container里，导致它的背景色只能被局限在容器的宽度范围内，没法撑满整个浏览器视口。下面给你两种实用的解决方案，你可以根据自己的项目场景选择：

方案1：调整HTML结构（最推荐，语义化更清晰） #

核心思路是把usp-section从container中独立出来，然后在usp-section内部加一个子容器来对齐内容。这样既能让背景色占满全屏，又能保证内部内容和页面其他区块保持一致的左右间距。

修改后的HTML代码： #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <main>
    <!-- 原intro区块保留在容器内 -->
    <div class="container">
      <section class="intro">
        <h1>Welcome to Our Website</h1>
        <p>Discover amazing places to visit and unique experiences.</p>
      </section>
    </div>

    <!-- USP区块单独放在容器外，内部用子容器对齐内容 -->
    <section class="usp-section">
      <div class="container">
        <h2>Unique Selling Points</h2>
        <p>Discover what makes us stand out from the competition.</p>
      </div>
    </section>

    <!-- 原destinations区块保留在容器内 -->
    <div class="container">
      <section class="destinations">
        <h2>Featured Destinations</h2>
        <p>Explore our top-rated destinations handpicked just for you.</p>
      </section>
    </div>
  </main>
</body>
</html>

对应的CSS代码（无需大幅修改原有样式）： #

.container { 
  padding: 0 6rem; 
} 

.intro, .destinations { 
  border: 1px solid red; 
} 

.usp-section { 
  background-color: #c2b280; 
  padding: 1rem 0; 
}

这种方案的优势是结构逻辑更清晰，后续维护或调整响应式布局时会更省心，是长期来看更优的选择。

方案2：用CSS负外边距抵消容器内边距（无需修改HTML） #

如果不想改动现有HTML结构，我们可以通过给usp-section添加负左右外边距，让它的背景“突破”容器的宽度限制，同时给区块内部添加对应的内边距，保证内容和页面其他部分对齐：

修改后的CSS代码： #

.container { 
  /* 把容器内边距存为CSS变量，方便统一修改和复用 */
  --container-padding: 6rem;
  padding: 0 var(--container-padding); 
} 

.intro, .destinations { 
  border: 1px solid red; 
} 

.usp-section { 
  background-color: #c2b280; 
  /* 用变量保持和容器一致的左右内边距，确保内容对齐 */
  padding: 1rem var(--container-padding); 
  /* 负外边距抵消容器的内边距，让背景撑满全屏 */
  margin: 0 calc(-1 * var(--container-padding)); 
}

这种方案的优点是不用动现有HTML结构，适合已经完成大量开发、不想重构代码的场景。需要注意的是：如果你的容器在响应式场景下会调整内边距（比如移动端改成2rem），一定要同步更新--container-padding变量的值，否则会出现内容对齐错乱的问题。

内容来源于stack exchange