1) Easy Content to Center

It is easy to get the page to center when you want to have just a box with no background extending to the edge of the browser window. You can just give a width, and a margin of auto, to a box that surrounds the whole page (the body would be an easy box to select in this situation). Figure 1 demonstrates how this can be accomplished.

2) Harder Content to Center

It gets harder to achieve the desired results when you have colored boxes or images that you want to extend across the whole page, while keeping the content centered in the browser window (see figure 4 for an example of this). Using the method in Figure 1 will not allow us to have our background colors expand across the page, while still centering the content on the page (this can be seen in Figure 2). Notice that the background colors don't expand across the whole page.

3) A Simple Solution

The problem with Figure 2 is that we only have one box we are working with. We need it to extend 100% of the browser so the background extends, and we need it to have a width so we can center the content on the page. We can't apply both to the same box. A simple solution is for you to add another box. This box will go inside the box that has the background color. Figure 3 demonstrates how this would work on the header. Notice that the <header> is given a blue background, and is allowed to extend across the whole page. The <div class="center"> is given a width and a margin, which centers the content inside the blue box.

4) Larger Application

Now we need to apply the same principle to all of the main sections of our website. We will need to create <div class="center"></div> boxes that surround all of these main sections. In this example we have three. Notice that since we added boxes around each of the main sections in Figure 4, and each of these have a class named center, all of these boxes are centered in the same way.

Instructions

These instructions will walk you through altering the HTML/CSS below. Try to match the centering effect seen in figure 5.

1. Add <div> tags inside of the main boxes (<header> <main> <footer>) and around the content.

   Example HTML

   <header>
        <div>
             Content inside the header
        </div>
   </header>

2. Add a class of "center" to each of these new divs. This should look similar to the following:

   Example HTML

   <div class="center">
             Content inside the header
   </div>
   

3. Add a new CSS rule that selects the class of center. Specify the width of the box (use something like 600px), and the margin to be auto. This should look similar to the following:

   Example CSS

   .center{
        width: 600px;
        margin: auto;
        border: 1px dashed white;
   }