Blog Post

Full Width Elements

If you have an image or other piece of content that you want to be the full width of the browser window, even if its parent is smaller than that, you can use these three properties to make it happen.

width: 100vw;
margin-left: 50%;
transform: translateX( -50% );

I’m not certain where I first saw this trick, but I believe it was on https://css-tricks.com