使 div 在页面上延伸，溢出其包含的 div

Question

我很难让一个 div 在页面上延伸，使其溢出其包含的 div。

我正在使用 WordPress 子主题的 23 个主题，仅导入引导 CSS 文件，没有 JavaScript 文件（无论如何！）。

我正在使用这个名为 section 的 div 添加样式，只是为了添加背景图像或颜色，如本网站橙色部分，请参阅下面的链接：

Flat Web Design

我试过了

position: absolute; 
left: 0; 
right: 0; 

但 position: absolute 似乎对网格造成了严重破坏。section div 出现在正确的位置，但是以下 div 位于“section”div 的顶部。

我知道 HTML5 部分标签。但据我了解，仅使用部分进行样式设置不是最佳做法，而是使用 div 代替？但是我已经尝试了 section 标签，我也遇到了同样的问题。

我希望有人可以建议我如何使 div 跨越页面，使其包含 div 溢出？这可以在没有绝对位置的情况下完成吗？

提前致谢

我的标记

<div id="content" class="site-content" role="main">
<div class="entry-content">
<div class="container">
<div class="section">
                <div class="row">
                <div class="col-md-4">
                    <?php the_field('title'); ?>
                </div>
                <div class="col-md-4">
                    <?php the_field('content'); ?>
                </div>
                <div class="col-md-4">
                    <?php the_field('image-item'); ?>
                </div>
                </div>
</div>
</div>
</div>
</div>

我的 CSS

.entry-header,
.entry-content,
.entry-summary,
.entry-meta{
margin: 0 auto;
max-width: 1150px;
width: 95%;

}

.section{
background:#e8e5ce;  
position:absolute;
left:0;
right:0;
}

Answer 1

要实现这种布局，你不能使用单个容器，每个部分都应该有自己的.container 元素，这样部分会覆盖窗口的宽度但内容居中：

HTML

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <?php the_field( 'title'); ?>
            </div>
            <div class="col-md-4">
                <?php the_field( 'content'); ?>
            </div>
            <div class="col-md-4">
                <?php the_field( 'image-item'); ?>
            </div>
        </div>
    </div>
</div>

CSS

.section{
    background-color:#e8e5ce;  
}