Constrain element within parent max-width, but with full-width background
HTML
<section class='container'>
<p>One solution to the problem of needing to create full-width backgrounds on some content that you want to be inside of the max-width column.</p>
<article class='breakout'>
<p class='container'>The text stays inside of the max-width of the <code>.container</code> parent, but has full-width background.</p>
</article>
<p>Browsers need to support <code>transform</code> and <code>vw</code> units, roughly IE9 and upwards.</p>
<p>Similar effects can be achieved with <a href="http://daverupert.com/2017/03/full-bleed-with-not/">Dave Rupert's method</a>. His code relies on using <code>:not</code>, which also means browser compatability IE9 and upwards.</p>
<p><a href="https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/">Another and more modern way</a> would be to usse this example with CSS Grid, however just for the most modern browsers so maybe not ready for the average production project just yet.</p>
</section>
CSS
.container {
max-width: 1024px;
margin: 0 auto;
}
.breakout {
position: relative;
left: 50%;
transform: translate(-50%, 0);
width: 100vw;
background-color:black;
color:white;
}
code{
background-color:yellow;
color:black;
}
