Part 2:Back to the Future

How to Update the Styling of the Page

The red brackets, show you where the new <div> sections are.

Step 1: In your #content and <nav> sections, put the inner elements you created in-between <div> and </div>

What you just created is for styling reasons. You want each vertical section (the left and right side of the navigation bar, where the Lorem Ipsum is, etc.)to touch the edges of the page, overall. Everything else (the links themselves, the Lorem Ipsum itself) should be centered and keep the max-width of 960px.

Step 2:Quick reminder, id is for a unique HTML element (aka something that only happens one time on a page). Class is for a class of HTML elements (elements that share the same styling).

You want to give these new sections useful names. The useful names will allow you to apply CSS to them. Give the <div> in the navigation bar, a unique id since you will only create one navigation bar. For the <div> in the content area, you should give it a class because you will eventually create more than one section of content. These sections of content will all share the same style.

Step 3: You will add a new id #nav-content{} (this is what was discussed 5 seconds ago in step 2). With the id add max-width: 960px; You will want the navigation bar to move to the center of the page, to do this you will use margin: 0 auto;

*Remember, setting the left and right margins to auto will center an element.

Hello, I’m the navigate bar and I’m all centered now.

Notice, how the purple still touches both edges of the page unlike the nav bar.

Step 4: You will now need to do the exact same style change you just did, but for the class=content-section you made previously. There aren’t any screenshots of this, I doubt you want to see the same thing twice.

You are now half-way to getting the sexy page, pictured in part 1.
Show your support

Clapping shows how much you appreciated Rose Pacheco-Campbell’s story.