How do we make a full browser width container when we’re inside a limited-width parent? In other words, how do we stretch the div outside of its ‘container’.

If we could use absolute positioning, we could set the container to be at left: 0; and width: 100%; – but we can’t because we want the container to remain inflow.

In my opinion, the best way to get around this situation is as follows:-

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

The idea behind this technique is that we push the container to the exact middle of the browser window with left: 50%;, then we pull it back to the left edge with a negative -50vw margin.

This way you don’t need any information about the parent width at all. Do note that both this and the calc() version require the parent to be exactly centred in the browser.

So why bother with the right and margin-right? To be honest, you don’t really need it on a left-to-right site, but if you are using a site that is built with the direction; right-to-left (rtl), you’ll need the right properties, so having both is more bulletproof.

So start getting your div’s stretched outside your containers! If this has helped you, leave a comment!