Html Weebly突破内容分区

我希望能够创建一个跨越整个屏幕宽度的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 -->

#主包装{
宽度：100%；
}
.集装箱{
保证金：0自动；
宽度：960px；
位置：相对位置；
}
{content}

在{content}里面，Weebly发挥了它的魔力，把你所有的东西都放进去。我试图直接嵌入一些代码：

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

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

.wide{
位置：绝对位置；
左：0；右：0；
宽度：100vw；
背景：#aaccff；
}
试验

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

有人知道如何在容器内获得100%宽的div吗。我也可以使容器100%宽，但是所有的Weebly小部件都会覆盖整个屏幕，我不清楚如何修改CSS使其具有固定的宽度

---

谢谢

这是因为父对象是相对定位的。因此，删除

位置：相对来自元素
.container
太好了，这个简单的解决方案非常有效。有趣的是，当您在“构建”部分编辑网站时，它不会显示div跨越页面的整个宽度，而是父容器的宽度。然而，如果你发布了这个网站，那么它就会像预期的那样工作。这确实很奇怪。这不仅仅是缓存吗？是的，这是Weebly builder的问题，当您处于构建模式时，整个自定义div无法正确显示（Weebly正在执行某种魔法生成这些页面）。然而，当你“预览”网站时，它看起来是正确的。