如何在网站内容后面添加颜色形状

Question

我将网站内容设置为1200像素并居中。我已经使用CSS网格和flexbox在其中放置内容。我的问题是，我将如何添加这些背景颜色形状/矩形以使它们拉伸视口宽度的整个宽度？如果我将它们包括在我的内容中，它们将不会拉伸全宽。我包括了我要达到的目标的图像。

Answer 1

我使用的技巧是使用类：

.pageWidth {
    display: block;
    width: 98%; /* for responsive views this'll leave 1% space left/right */
    max-width: 1200px; /* The max size for your desktop view */
    margin: 0 auto;
}

然后您执行两个div：

<div id="ImFullWidthWithColor">
    <div class="pageWidth">I am nice centered content</div>
</div>

注意：重要的是不要将任何颜色或其他样式设置为.pagewidth，唯一的目标是将内容放置在中间和右边的宽度中