Css 全宽子div上的背景色

我试图在一个被拉伸（使用负边距）到其最外层父div的全宽的div上设置一个背景色

下面是一个简化的例子：

白色div

.featured wrapper

覆盖了黑色div

.site

的全部宽度，但其背景色不覆盖。我想页边空白是透明的

有没有办法使整个

.featured wrapper

div变白，包括它的（负）边距？（或者有没有其他方法来实现这一点？）

谢谢

检查这个

.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0px 0 0px;
    position:absolute;
    width:100%;
    z-index:100;
    left:0;
}

CSS:

.site {
    background-color:black;       
    padding: 0 40px;
    height:300px;
    width:320px;
}
.site-content {
    width:100%;
    overflow:hidden;
}
.wrapper {
    overflow:hidden; 
    background-color:red; 
    height:100%;
}
.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0 0 -40px;
    position: absolute;
    width: 399px;
}

<div id="page" class="site">

    <div id="main" class="wrapper">

        <div id="primary" class="site-content">
            <div class="featured-wrapper">
                <p>This is the featured wrapper</p>
            </div>
    </div>
   </div>

</div> 

HTML:

.site {
    background-color:black;       
    padding: 0 40px;
    height:300px;
    width:320px;
}
.site-content {
    width:100%;
    overflow:hidden;
}
.wrapper {
    overflow:hidden; 
    background-color:red; 
    height:100%;
}
.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0 0 -40px;
    position: absolute;
    width: 399px;
}

<div id="page" class="site">

    <div id="main" class="wrapper">

        <div id="primary" class="site-content">
            <div class="featured-wrapper">
                <p>This is the featured wrapper</p>
            </div>
    </div>
   </div>

</div> 

这是特色包装

检查此项

CSS:

.site {
    background-color:black;       
    padding: 0 40px;
    height:300px;
    width:320px;
}
.site-content {
    width:100%;
    overflow:hidden;
}
.wrapper {
    overflow:hidden; 
    background-color:red; 
    height:100%;
}
.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0 0 -40px;
    position: absolute;
    width: 399px;
}

<div id="page" class="site">

    <div id="main" class="wrapper">

        <div id="primary" class="site-content">
            <div class="featured-wrapper">
                <p>This is the featured wrapper</p>
            </div>
    </div>
   </div>

</div> 

HTML:

.site {
    background-color:black;       
    padding: 0 40px;
    height:300px;
    width:320px;
}
.site-content {
    width:100%;
    overflow:hidden;
}
.wrapper {
    overflow:hidden; 
    background-color:red; 
    height:100%;
}
.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0 0 -40px;
    position: absolute;
    width: 399px;
}

<div id="page" class="site">

    <div id="main" class="wrapper">

        <div id="primary" class="site-content">
            <div class="featured-wrapper">
                <p>This is the featured wrapper</p>
            </div>
    </div>
   </div>

</div> 

这是特色包装

我没有正确地理解你，但是你想要吗？从视觉上看，我想要示例中的白色子div覆盖整个黑色背景，从左到右。我没有正确地理解你，但是你想要吗？从视觉上看，我想要示例中的白色子div覆盖整个黑色背景，从左到右。如果需要任何更改，请告诉我。如果需要任何更改，请告诉我。谢谢，这在JSFIDLE中非常有效，尽管在我的模板中会引起一些其他问题；）看起来绝对定位是一种方式，所以我将采用这种方式。谢谢，这在JSFIDLE中非常有效，尽管它会在我的模板中引起一些其他问题；）看起来绝对定位是一条路，所以我会走这条路。