在整个宽度上有背景色，但在左右两侧保留一些填充

Question

我在这里有一个测试网站：http://test-minimalist.weebly.com/#bbienfaits

背景颜色（第二页为绿色）没有填充整个宽度，因为容器类是960px。

如果我将这个容器设置为width=100%，我的背景色将填充整个空间。这很完美，但另一个问题出现了：文本也占据了整个空间，但我更喜欢左右填充。

所以我试着把padding: 0 100px;放在这个容器上，但背景颜色不再填充这个空间。

知道吗？

谢谢。

Answer 1

删除.container宽度。将宽度添加到fp-tableCell

.container {
 margin: 0 auto;
 width: auto;
}
.fp-tableCell {
 display: block;
 vertical-align: middle;
 height: 100%;
 margin: 0 auto;
 width: 960px;
}

Answer 2

您可以在容器中添加另一个div，它将有一个边距而不是填充，然后只为容器设置背景色。

<div class="container">
  <div class="inner-container"></div>
</div>
.container {
  width: 100%;
  background-color: green;
}
.inner-container {
  width: 80%;
  margin: 0 auto;
} 

Answer 3

使用此代码容器{宽度：100%}

.段落{位置：相对；左侧填充：15px；右侧填充：15px；}