CSS to Force Element Full-Width When Inside a Max-Width Container

container element with full width element inside

If an element like a image is wrapped by a container that has a limited width, how do you make the inner element expand outside the bounds of its container to stretch full-width of the browser window?

I used to think it could only be done with Javascript.  The reason is because there was a WordPress page builder that I used years ago that had a stretch full-width feature which used Javascript to accomplish it.

Well, thanks to the power of modern CSS, we can use calc() and vw solve this problem wonderfully!  Here’s how to do it. Continue reading CSS to Force Element Full-Width When Inside a Max-Width Container