<header class="full-width-magic">
<h1>Anything</h1>
<p>More about anything Cras dictum diam quis felis pretium, interdum sodales lacus sollicitudin. Suspendisse placerat aliquet neque, eget gravida lorem facilisis in. Pellentesque sollicitudin nunc in lectus faucibus elementum. Morbi quam ante, scelerisque eu faucibus non, pulvinar sed leo. </p
</header>
.full-width-magic{
position:relative;
max-width:72rem;
margin:0 auto;
text-align:center;
font-size:calc(1.4em + 1vw);
padding:15vh 2rem 20vh 2rem;
}
.full-width-magic:before{ /*where the magic happens*/
content:' ';
position:absolute;
left:50%;
top:0;
bottom:0;
width:100%;/* non vw fallback*/
width:100vw;
margin-left:-50%;/* non vw fallback*/
margin-left:-50vw;
background-color:lightyellow;
z-index:-1; /* put it behind the parent*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.