In most web designs, the content is typically "contained" to be centered and limited by a maximum width:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width: 1000px; margin: 0 auto;">
<section>
<h1>Containered Content</h1>
<p>
Lorem ipsum ...
</p>
</section>
<section style="WHAT GOES HERE?">
<h2>My background should overflow the container</h2>
<p>
Lorem ipsum ...
</p>
</section>
</div>
</body>
</html>
If you wish to create a "stripe" in the second section where the background extends to 100vw, how would you achieve this currently?
I am not seeking a solution like this:
<!DOCTYPE html>
<html>
<body>
<section style="width: 1000px; margin: 0 auto;">
<h1>Containered Content</h1>
<p>
Lorem ipsum ...
</p>
</section>
<section style="background: black;">
<div style="width: 1000px; margin: 0 auto;">
<h2>My background should overflow the container</h2>
<p>
Lorem ipsum ...
</p>
</div>
</section>
</body>
</html>