Weebly of content div

Question

我希望能够创建一个跨越整个屏幕宽度的div。问题是，这应该与Weebly的设计系统一起工作，该系统将它放在固定宽度的div中。

内容的创建方式如下：

#main-wrap {
        width:100%;
}

.container {
    margin: 0 auto;
    width: 960px;
    position: relative;
}

<div id="main-wrap">
    <div class="container">
        {content}
    </div><!-- end container -->
</div><!-- end main-wrap -->

在{content}里面是Weebly施展魔力的地方，把你所有的东西都放在里面。我试着直接嵌入一些代码：

.wide {
    position: absolute;
    left:0; right:0;
    width: 100vw;
    background: #aaccff;
}

<div class="wide">
    Test
</div>

但这并不起作用，宽div比屏幕更宽，但只能从与content div相同的左侧位置开始。

有谁知道如何在容器中获得一个100%宽的div。我也可以使容器100%宽，但是所有的Weebly小部件都是整个屏幕的长度，我不清楚如何修改CSS使它们具有固定的宽度。

谢谢!

Answer 1

这是因为父母有相对的位置。因此，从元素.container中删除position: relative;