Full Width Container with CSS

Here’s how you make a full-browser-width container when we’re inside a max-width/limited wrapper.

HTML

<!-- Parent Container -->
<div class="site-main">
	<!-- Content Wrapper -->
	<div class="wrapper">
		<!-- Content we want to be full width -->
		<div class="full-width">
			<h1>Hello World!</h1>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque egestas tortor in semper. Nunc fermentum faucibus dictum. Nulla sollicitudin suscipit justo a placerat.</p>
	</div>
</div>

Full width parent container

In this example my parent container is set at a max-width of 100% with a nested content wrapper.

/* Base Styles */

.site-main{
    max-width: 100%;
}

.wrapper{
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
}

/* Full width - break out of parent container */

.alignfull{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

Constrained parent container

In this example my parent container (.site-main) is set at a max-width of 1800px with a nested content wrapper (.wrapper).

You can calculate the negative margin for .alignfull like this parent – wrapper:

• 1800px (parent) – 1350px (wrapper) = 450px

CSS

/* Base Styles */

.site-main{
    max-width: 1800px;
    margin: 0 auto;
}

.wrapper{
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
}

/* Full width - break out of parent container */

.alignfull{
    /* negative margin is calculated like this: parent - wrapper */
    /* 1800px - 1350px = 450px */
    margin-left: calc(-450px / 2);
    margin-right: calc(-450px / 2);
}

/* Breakpoint for parent container max-width */
@media only screen and (max-width: 1800px) {
    .alignfull{
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}