Centering an element

What we really need to do is to wrap the entire content in a div tag; so let's do that. Go into the HTML file. In the line beneath the opening section tag, add <div class="wrapper"> . And right before the closing section tag, close it with </div>:

<section class="secondary-section"> 
    <div class="wrapper">
        <div>...</div>
        <div>...</div>
        <div>...</div>
    </div> 
</section>

Now, switch over to the CSS file. The .wrapper tag is going to be a more reusable class. To center any element, we'll give it a margin, and we'll use the two-value syntax: top and bottom are going to be zero, and left and right are going to be auto. We also have to give it a width of 960px. Without a width, you really can't center it using this margin technique:

.wrapper { 
  margin: 0 auto; 
  width: 960px; 
} 

There, we have it; all of the content should now be centered inside this wrapper:

The wrapper class, like I said, is nice and reusable. I will use the wrapper class anywhere on the site where I want to center a collection of elements.