要让你的WordPress自定义模板里的这个calltoaction区块铺满整个窗口宽度，核心问题在于你当前嵌套的.container元素——这类容器（通常来自Bootstrap或模板自带的框架）默认有最大宽度限制和左右内边距，导致内容无法撑满全屏。下面给你两种可行的解决方案：

方案1：调整HTML结构（推荐） #

直接把原有的.container替换成全屏容器，Bootstrap里可以用.container-fluid，它会自动占满整个视口宽度，同时保留合适的内边距：

<section id="calltoaction" class="calltoaction" style="background-position: 50% 15px;">
  <div class="blacklayer"></div>
  <!-- 替换.container为container-fluid -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h2>Title Text</h2>
        <p>Test Text</p>
      </div>
      <div class="col-md-12 text-center">
        <a href="#" class="btn btn-danger btn-lg">你的按钮文本</a>
      </div>
    </div>
  </div>
</section>

如果你的模板没有引入Bootstrap的.container-fluid样式，也可以自定义一个全屏容器类：

.full-width-container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

然后把HTML里的容器换成<div class="full-width-container">即可。

方案2：用CSS覆盖现有样式（无需改HTML） #

如果不想调整HTML结构，可以通过CSS强制让这个section里的容器铺满宽度，记得加上#calltoaction前缀，避免影响页面其他容器：

/* 让section本身确保占满宽度 */
#calltoaction {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 移除container的最大宽度和内边距限制 */
#calltoaction .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 移除row的左右外边距 */
#calltoaction .row {
  margin-left: 0;
  margin-right: 0;
}

/* 移除列的左右内边距（可选，根据需求调整） */
#calltoaction .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

/* 确保blacklayer背景层也铺满全屏 */
#calltoaction .blacklayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 保留你原有的背景样式，比如 background-color: rgba(0,0,0,0.5); */
}

额外提示：如果你的模板给body设置了左右内边距或margin，可能需要给#calltoaction加上margin-left: -Xpx; margin-right: -Xpx;来抵消，X的值对应body的内边距大小。

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