Full Width Container in Limited Width Parent

A simple hack to allow the children of an limited HTML element to be full width.

Example

Many times we want an element to be larger than the max width of its parent.

Imagine this code:

<main class="limited-width">
	<div class="full-width">
		<img />
	</div>
</main>

With the following CSS for the parent:

.limited-width {
	width: 500px;
}

Solution

However, we want our full-width element to be 100% of the whole view port. This is a simple hack to make that happen:

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

This trick is originally from this source.