满幅的背景，定宽的内容

最常见的方法就是为每个区块准备两层元素：外层用来实现满幅的背景，内层用来实现定宽的内容。
后者是通过 margin: auto实现水平居中的。
举例来说，采用这种设计的页脚通常需要把结构代码写成：

<!--html-->
<footer>
     <div class="wrapper">
     <!-- 页脚的内容写在这里 -->
 </div>
</footer>
    <!--css-->
<style>
footer {
     background: #333;
}
.wrapper {
     max-width: 900px;
     margin: 1em auto;
}
</style>

去除额外嵌套层解决方案

<!--html-->
<div class="box">
        因为当内边距是 50% - 450px 时，只可能给内容留出 900px（2×450px）的可用空
        间。只有把 width 显式地设置为 900px 之外（或大或小）的其他值，我们才有可能
        看出区别。由于我们想要得到的内容宽度本来就是 900px
</div>

<!--css-->
<style>
   *{
       margin: 0;
       padding: 0;
     }
    .box{
       height: 500px;
       padding: 1rem calc(50% - 500px);
       background: #333;
       color: #fff;
       margin: 100px 0;
     }
</style>

思路
最终效果.jpg