Can you create a background color block between two divider elements?

Site URL: https://www.thislandisdigital.com/

Right now I have some code set up that assigns a background color to certain text blocks across my site to make them readable in the same way that the "Image Block: Card" element does. Unfortunately, when I try to apply that to pages like my "Home a Drone" page, it cuts out the spacers on the side. Including the spacers doesn't fix the problem either since they won't dynamically scale to match the height of the text block, instead leaving cutouts underneath them. In the example below, the height of the spacers doesn't match the height of the text, leaving a fat T shape.

What I need is to 1.) have a block of color that is as wide as the rest of the content on my page (stopping before the side padding), 2.) covers the entire text block so that it can be read easier, 3.) aligns aesthetically with the existing dividers, and 4.) dynamically scales with the rest of the page.

I don't know what options I have available to me necessarily, but my first guess is to somehow create a new shape that dynamically follows to the center of each divider (one is a divider element, the other is the "Page Border" from the site style).

Any help would be appreciated.

Add to Home > Design > Custom CSS

div#page-5cef58722fb7210001f6c3cb>.row>.col>div {
    background: red;
}
div#page-5cef58722fb7210001f6c3cb>.row>.col>div:nth-last-child(4)~div {
    background: unset;
}

That gets the width of the page fairly well, though it doesn't reach the border lines as I'd hoped. I need to be able to repeat the pattern on multiple pages, too, and I can't parse your selectors enough to do that. Could you describe what that's pointing at on the page?