divを固定幅のdivから100％の幅に分割して

Question

をthis pageに設定すると、div.bouble_shaded_bg_full-widthがブラウザの幅の100％になるようにします。

私は、次のCSSを試してみましたが、これは正常に動作しない、ページの横にdiv要素をプッシュ：

.bouble_shaded_bg_full-width { 
    margin-left: calc(((100%-1140px)/2)*(-1)); 
    margin-right: calc(((100%-1140px)/2)*(-1)); 
} 

メインコンテンツ領域が1140px広いです。

div.bouble_shaded_bg_full-widthは、ブラウザの幅の100％が固定幅のdivに含まれている場合、どうすればよいですか？

Answer 1

以下のようにして、現在の左右のマージンを削除します。

.bouble_shaded_bg_full-width { 
    width:100vw; 
    position:relative; 
    left:50%; 
    margin-left:-50vw; 
} 

Answer 2

試行100vw、これはビューポートの幅の100％になります。