Tutorials

Table of contents
Close

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 is 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 well, "auto" which is what actually centers the content.

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 the add the max-width and margin code to the .header-container, .body-container, and .footer-container.

 

Here is what that CSS would look like:

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