Html 将导航栏BG颜色扩展到容器外部

我的导航栏在一个容器中，我希望我可以将背景黄色延伸到屏幕边缘，但将页面名称保留在容器中？我有一支密码笔-

html，正文{
背景色：#ededed；
保证金：自动；
}
保险商实验室{
列表样式类型：无；
保证金：0；
垫面：4px；
垫底：4px；
左侧填充：0px；
右边填充：0px；
溢出：隐藏；
背景颜色：黄色；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
边界半径：5px；
}
li a:悬停：未（.active）{
背景色：白色；
}
.主动{
背景色：白色；
}
.货柜干管{
显示：网格；
填充顶部：50px；
左边距：自动；
右边距：自动；
最大宽度：650px；
}
.container main>div{
背景色：rgba（255、255、255、0.8）；
边框：1px纯黑；
文本对齐：居中；
字体大小：30px；
}
.货柜导航{
显示：网格；
左边距：自动；
右边距：自动；
最大宽度：650px；
}

1.
2.
3.
4.

您可以将其包装在另一个容器中以扩展背景

.yellow{
背景颜色：黄色；
}

我建议为类

使用伪类
：before
和
：after
。容器导航
。请执行以下操作：

添加
位置：相对至
。集装箱导航

并将这些带有绝对定位的伪类添加到css中


html，
身体{
背景色：#ededed；
保证金：自动；
}
保险商实验室{
列表样式类型：无；
保证金：0；
垫面：4px；
垫底：4px；
左侧填充：0px；
右边填充：0px；
溢出：隐藏；
背景颜色：黄色；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
边界半径：5px；
}
li a:悬停：未（.active）{
背景色：白色；
}
.主动{
背景色：白色；
}
.货柜干管{
显示：网格；
填充顶部：50px；
左边距：自动；
右边距：自动；
最大宽度：650px；
}
.container main>div{
背景色：rgba（255、255、255、0.8）；
边框：1px纯黑；
文本对齐：居中；
字体大小：30px；
}
.货柜导航{
显示：网格；
左边距：自动；
右边距：自动；
最大宽度：650px；
位置：相对；/*将此项添加到它*/
}
/*把这个加进去************/
.货柜导航：在{
内容：“；
位置：绝对位置；
左-100%；
底部：0；
排名：0；
右：100%；
背景颜色：黄色；
}
.货柜导航：在{
内容：“；
位置：绝对位置；
左：100%；
底部：0；
排名：0；
右图：-100%；
背景颜色：黄色；
}






1.
2.
3.
4.
我要试一试！真的很感激，谢谢：）魔术！干杯祝你今天愉快：）@B.Hunter，谢谢。乐意帮忙：）