Centering your website using max-width and auto margins

Often times it is useful to be able to center your website in a browser window. There are several ways to accomplish this task. In this snippet, we will explore two of those options.

Technique 1

The simple and most "sweeping" way to center your content in a browser window is to apply some CSS to the body tag. Add the code below to your CSS file in the template builder to center your website using the body tag. The max-width does exactly what it says, it sets a maximum width for the center content. The margin declaration is what centers the content in the browser window. The "0" sets the top and bottom margin to "0" and the "auto" sets the right and left margin to "auto" which is what actually centers the content.
CSS 
body { 
	max-width: 1080px; 
	margin: 0 auto !important; 
	float: none !important; 
}

Technique 2

In this technique, we are going to use the same max-width and margin code from above, but we are going to apply it to a different part of the HTML. Here we are going to add the max-width and margin code to the .header-container, .body-container, and .footer-container.

Here is what that CSS would look like:

CSS 
.header-container, .body-container, .footer-container { 
	max-width: 1080px; 
    margin: 0 auto; 
}