在整个宽度上具有背景颜色，但在左右保留一些填充答案

【问题标题】：Having the background color on the whole width but keeping some padding left right在整个宽度上具有背景颜色，但在左右保留一些填充
【发布时间】：2015-06-30 16:50:37
【问题描述】：

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

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

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

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

有什么想法吗？

谢谢。

【问题讨论】：

您在网站上的 css 代码中有一些错误，与此问题无关：.tall-header-page, .short-header-page, .no-header-page, .landing-page {b背景：#222121}。背景中的双“b”
我知道。无论如何，谢谢。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

<div class="container">
  <div class="inner-container"></div>
</div>

.container {
  width: 100%;
  background-color: green;
}

.inner-container {
  width: 80%;
  margin: 0 auto;
}

【讨论】：

我按照您的建议尝试：使用子元素（id：wsite-content，位于我的容器类下方）设置width: 80%; 和margin: 0 auto;，但保持相同的问题：背景颜色是不再填满整个空间。
那你的问题肯定出在其他地方。查看对您问题的评论，这是否解决了问题？
@Bronzato 问题是您的容器没有背景颜色，因此设置填充 100px 将导致白色背景。此外，您的内部容器只有 1720 像素宽，因此不会占用全部空间。

【解决方案3】：

使用此代码 .itz 有效。容器 { 宽度：100% }

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

【讨论】：