简单的CSS“ body→wrapper→column”-主体取列背景？

Question

目标：使第一列和最后一列的背景延伸到DOC的边缘 width ，在内容上保留内部包装。因此，红色将延伸到左边缘，蓝色将延伸到右边缘，但是文本将保留在中间。

问题：列的变量＃，列背景设置为内联样式。我希望最外面的列背景扩展到视口的左右边缘，但内容要保留在包装器内，这样文本就不会出现意外的布局。观看此youtube视频（https://www.youtube.com/watch?v=DSj5fGAJBP0）

在尊重上述两个问题的前提下，有什么想法可以做到这一点？我想这将需要额外的标记。

编辑：这是一张图像，说明我想要实现的目标： image example of background with columns and wrapper

.wrapper {
	width: 600px;
	margin: auto;
}
.col-6 {
	width: 50%;
	float: left;
}
.clearfix:after {
    content: "";
    display: table;
    table-layout: fixed;
    clear: both;
}

<div class="wrapper clearfix">
	<div class="col-6" style="background-color: red">
		<p>content inside the first div. e word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Fof</p>
	</div>
	<div class="col-6" style="background-color: blue">
		<p>content inside the second div. em Ipsum unorum et Malorum" </p>
	</div>
</div>

一个更复杂的示例来显示我正在寻找的灵活性：

.wrapper {
	width: 600px;
	margin: auto;
}
.col-6 {
	width: 50%;
	float: left;
}
.col-3 {
    width: 25%;
    float: left;
}
.clearfix:after {
    content: "";
    display: table;
    table-layout: fixed;
    clear: both;
}

<div class="wrapper clearfix">
	<div class="col-3" style="background-color: red">
		<p>content inside the first div. e word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Fof</p>
	</div>
	<div class="col-6" style="background-color: blue">
		<p>content inside the second div. em Ipsum unorum et Malorum" </p>
	</div>
	<div class="col-3" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c3/Highland_soldier_1744.jpg'); background-size: cover">
		<p>content inside the third div. em Ipsum unorum et Malorum" </p>
	</div>
</div>