让页面在整个页面溢出其包含的div

Question

我很难在整个页面溢出它的包含div时使div伸展。

我使用二十三主题的WordPress儿童主题导入引导CSS文件只，没有JavaScript文件（但无论如何！）。

我使用这个div称为部分添加样式只是添加一个背景图像或颜色像这样的网站，橙色部分请参考以下链接：

Flat Web Design

我已经试过

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

但位置：绝对似乎对网格造成严重破坏。节div出现在正确的位置，但下面的div位于“节”div上。

我知道HTML5部分标记。但据我了解，使用部分仅用于样式不是最佳做法，而是使用div来代替？不过，我已经试验过节标签，并且遇到了同样的问题。

我希望有人可以告诉我如何在跨越其包含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

为了实现这种布局不能使用单容器，每节都守LD具有其自己的.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; 
}