JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h1>title</h1>
    <div class="subcontainer">
        misc header with relative position

        <div class="content">
            I want this content to extend to the full width of the page regardless of parent elements.  In essence, this element needs to "burst out" left and right, regardless of window width or parent margins. Lorem ipsum dolor sit amet.
        </div>
    </div>
</div>

CSS

.container{
    margin:auto; 
    width: 70%;
    background-color: #ddd;
}
.subcontainer{ position: relative; }
.content { 
    background-color: #aaf;
    position: absolute;
    left:0;
}

JavaScript

$(window).resize(function(){
    setContentWidth();
});


function setContentWidth()
{
var windowWidth = $(window).width();
var leftOffset = $('.container')[0].offsetLeft;

$('.content').css({'width': windowWidth, 'left': -leftOffset});
}
setContentWidth();