讓頁面在整個頁面溢出其包含的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; 
}