Bootstrap 4 stretch background of column to fill width of screen without container-fluid and keep alignment with grid

Question

I'm currently setting up a design and have stumbled upon this question which i cant seem to find a "pretty" solution to.

If you have a look at the image below you will see 3 rows where one has two columns. The red colors behind the columns represents the bootstrap containers. (The green box has purple top and bottom border. I see now that they look red - they are not)

Usually if i want to have a "full width" backgrounded container, i'd wrap it in a "div" which then has either the background color or image, depending on need - this is depicted as the green box with the purple outline - nothing fancy there.

Now, i would like somewhat the same, just for two columns inside a container. ( Yellow and blue ). I need the columns, and thereby also the content, to be aligned with the rest of the webpages grids, but the backgrounds to stretch to the screen edge (Yellow/1th column stretches left, blue/2. column stretches right).

Pseudo code/classes

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

I've tried with a "container-fluid", but figured that the alignment of the columns wouldent match that of the normal containers.

I've been playing around with attempts on making pseudo elements inside the cols, with absolute positioned backgrounds and calculated offsets - it just doese'nt seem as a pretty solution.

Have i missed something completely simple here; or do you have any ideas or possible cleaner solutions at hand?

Thanks in advance