html - 拆分背景居中的内容

Question

我正在尝试使用居中的内容区域进行全宽分割背景色。但是，内容不会对齐，并且在调整屏幕大小时始终处于关闭状态。

居中内容区域的最大宽度为 1200px，父 div 拆分为 60%/40%。当你计算它是 720px/480px 并且应该匹配上面的 div。

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.site-content {
  clear: both;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 0;
  position: relative;
}
.site-content,
.left_container >div,
.right_container>div {
  border: 1px solid #000;
}
.left_container,
.right_container {
  padding-bottom: 100%;
  margin-bottom: -100%;
  /*Fixes float height*/
}
.left_container >div,
.right_container>div {
  position: relative;
}
.left_container {
  float: left;
  width: 60%;
  background-color: #ced7db;
}
.left_container > div {
  float: right;
  max-width: 720px;
}
.right_container {
  background-color: #999;
  float: right;
  width: 40%;
}
.right_container > div {
  max-width: 480px;
}

<header>
  <div class="site-content">
    <h1>Heading<h2>
    </div>
</header>
<div id="introduction" >
<div class="left_container">
    <div>
        <h2>Left</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div> 
<div class="right_container">
    <div>
        <h2>Right</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</div>

这样做的预期结果是标题区域和内容区域在左右边缘对齐，而背景延伸到浏览器的末尾。我试过使用渐变背景方法，百分比宽度仍然被丢弃。

Answer 1

我无法完全按照自己的意愿行事，所以我选择了父级背景渐变方法。这里的例子: CSS: Set a background color which is 50% of the width of the window