So how's it going so far?

Were you able to build parts of the Best City Guide layout?

Now, I'm going to show you one way you can build this layout.

If you did things different than I did, that's okay.

Because there's no 100% correct way of coding this layout.

In fact, I encourage you do some things differently and

experiment with the layout styles.

So the first thing I'm gonna do is create some layout wrappers.

So in the HTML,

I'll start by adding a container around the content inside main-header.

So right below the opening header tag I'll add a div with the class container.

And then I'll place the new closing div tag right above the closing header tag.

Then I'll add a container around the three columns.

So right above the opening div tag for the secondary column,

I'll add a div and give it the class container.

Then I'll add the new container closing div tag right

after the tertiary closing div tag.

So the containers I just created will center the layout on the page and keep it

from looking too wide or too narrow, depending on the device or viewport width.

And I'll add the width and margin styles later.

So now in style.css I'm going to write the rest of the base styles for the name and

navigation elements.

So first, right here in the name rule I'm going to add the margin property and

set the value to 0.

This removes the default top and bottom margins from the h1, and

it also helps prevent that collapsing margin behavior

you learned about in the first section of this course.

Next I'll go back to my stylesheet and create a new rule that targets main-nav

and I'm going to set its top margin value to 5 pixels.

This gives main-nav a little more separation from the site name above.

In the rule below main-nav, so right here, I'm going to add a display property and

set the value to block, then I’ll add a padding property.

Then I’ll set the top and bottom padding to 10 pixels, and the left and

right padding values to 15 pixels.

This makes the name and navigation link hover targets taller and wider.

So that the links are easier to click with a mouse and

easier to tap on touchscreen devices.

Next I'm going to write the base styles for layout containers like the main

header, the banner, footer and the content columns.

So back in my stylesheet, right under the Layout Containers comment,

I'm going to create a new rule that targets main-header, and

I'm going to define top and bottom padding.

So I'll say, padding-top, I'll give it a value of 0.5em and

I'll set the bottom padding to 0.5em as well.

Right below, I'll create a new rule that targets the banner class and main-footer.

Then I'm going to say text-align: center.

So this will center align the content and

the banner element and down below in the footer.

So it looks like the large banner div here needs top and

bottom padding to create some white space around the content inside.

Back in my stylesheet,

again, under the layout containers, I'll go into my banner rule.

And I'm going to add a padding property and I'll set the top and

bottom padding value to 3.2em and the left and right padding value to 0.

Then I'll give it a bottom margin.

So I'll say margin bottom 60 pixels.

The bottom margin will add some nice separation between the banner div and

the content columns below it.

Next, I'll create small gutters between each column in my layout

using padding values.

So back in my layout container styles, right under the banner rule,

I'll create a new rule that targets the class call.

Then I'll add a padding-right property and set it's value to 1em and

then I'll create a padding-left value and also set it's value to one 1em.

The padding values make the content easier and

more pleasant to read because the text isn't up against the edge of the columns.

So next in the page element section of my stylesheet,

I'm going to target the h1 inside the banner here, so it has the class headline.

So back in mystyle sheet, I'll create a new rule that targets headline.

And then I'm going to set its bottom-margin to 0.

I'm doing this because I think there's a little too much space

between the headline and the tagline below it.

So once I refresh the page we can see that it looks a little better.

There's not as much space between the two elements.

Okay, so in the next video, I'll begin showing you how I style the layout for

large screens using media queries.