Легко CSS "тело → обертка → столбец" - тело взять фон столбца?

Question

ЦЕЛЬ: сделать фон первого и последнего столбца расширенным до края ширины DOC, сохраняя внутреннюю оболочку содержимого. Таким образом, красный будет простираться до левого края, синий будет простираться до правого края, но текст останется в центре.

ВОПРОСЫ: переменные # столбцов, заданные фоны столбцов с использованием встроенного стиля. Я хочу, чтобы крайние внешние фоны столбцов были расширены до правого и левого краев области просмотра, но содержимое оставалось внутри оболочки, чтобы текст не появлялся неожиданно. Посмотрите это видео на YouTube ( https://www.youtube.com/watch?v=DSj5fGAJBP0)

Есть идеи, как это сделать, учитывая 2 вопроса выше? Я предполагаю, что это потребует дополнительной разметки.

РЕДАКТИРОВАТЬ: Вот изображение, чтобы проиллюстрировать, что я хочу достичь: пример изображения фона с колонками и оболочки

.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>