Css 如何创建偏离中心的响应背景？

我正在尝试使用引导创建一个有点奇怪背景的布局

对于内部页面，它分为两个不相等的列[7cols&5cols]，左栏需要白色背景，左栏需要浅灰色背景。无论大小如何，两个背景都需要延伸到浏览器视口的边缘。以下是一个不起作用的示例：

当你开始调整浏览器窗口的大小时，问题就变得很明显了——右边的栏背景应该出现，以保持它在文本后面的位置

---

我不知道如何正确处理这个问题。有什么想法吗？

我认为问题的出现是因为：

在bootstrap.min.css中

@media (min-width: 768px)
.col-sm-7 {
width: 58.333333333333336%;
}

如果宽度小于768px，则将从.col-sm-7中删除宽度

您可以这样做，以获得768px下的全宽白色背景，否则将是您当前的背景：

@media (max-width: 768px) {
div.content {
background: #ffffff;
}
}

---

尝试使用

.col-xs-7

和

.col-xs-5

。

询问代码的问题必须表明对所解决的问题的最低理解。包括尝试过的解决方案、它们不起作用的原因以及预期结果。