Bootstrap 4 растягивает фон столбца, чтобы заполнить ширину экрана без жидкости-контейнера, и сохраняет выравнивание по сетке

В настоящее время я создаю дизайн и наткнулся на этот вопрос, на который я не могу найти красивое решение.

Если вы посмотрите на изображение ниже, вы увидите 3 строки, в одной из которых есть два столбца. Красные цвета за столбцами представляют контейнеры начальной загрузки. (Зеленый прямоугольник имеет фиолетовую верхнюю и нижнюю границу. Теперь я вижу, что они выглядят красными, но это не так)

Обычно, если я хочу иметь фоновый контейнер полной ширины, я помещаю его в div, который затем имеет либо цвет фона, либо изображение, в зависимости от необходимости — это отображается в виде зеленого поля с фиолетовый контур - ничего особенного.

Теперь я хотел бы примерно то же самое, только для двух столбцов внутри контейнера. (желтый и синий). Мне нужно, чтобы столбцы и, следовательно, также содержимое были выровнены с остальными сетками веб-страниц, но фоны растягивались до края экрана (желтый/1-й столбец растягивается влево, синий/2-й столбец растягивается вправо).

Псевдокод/классы

<div class="my-full-width-background">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>I'm have a full width background!</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <!-- This would go all the way to the edge of the screen on left side -->
                <div class="background-image go-to-edge left"></div>
                <div class="text-content">
                    <h2>This text would be aligned to the other containers col's</h2>
                </div>
            </div>
            <div class="col-md-4">
                <div class="background-color go-to-edge right"></div>
                <div class="text-content">
                    <h2>This text is still within grid as well. Although the background color goes all the way
                    out of the grid and to the right screen edge.</h2>
                </div>
            </div>
        </div>
    </div>

Я пробовал использовать container-fluid, но решил, что выравнивание столбцов не будет соответствовать выравниванию обычных контейнеров.

Я играл с попытками создания псевдоэлементов внутри столбцов, с абсолютным позиционированием фона и вычисляемыми смещениями - это просто не кажется красивым решением.

Я пропустил что-то совершенно простое здесь; или у вас есть какие-либо идеи или возможные более чистые решения?

заранее спасибо