So, the best way to compensate for padding and border width values,

expanding the total size of an element, is with a new CSS feature called box-sizing.

With the box-sizing property, we can alter the way the total width and

height are calculated.

So, let's go back to our primary and secondary-content rule.

And right beneath the width property, let's go ahead and

add the property box-sizing by typing box-sizing.

Now, the value border box forces the padding and

borders into the width and height of the element instead of expanding it.

So, if we change our width back to the desired value of 960 pixels,

when we save our style sheet and refresh our page,

we can see that the final width of the rendered containers is

now the actual 960 pixel width we defined regardless of that padding value.

And now we can do the same for our header height.

So let me copy this box-sizing declaration we just wrote, and

let's scroll up to our main header rule and paste the box-sizing property.

So, let's save our style sheet.

Let's go back to our layout and refresh.

And when we inspect the header element,

we can see that it's back to being 850 pixels tall.

It's no longer affected by that 170 pixels of top padding.

So, as we can see, box-sizing is wonderful because it dynamically subtracts

the borders and paddings of each side from the width and height properties we set so

it makes it easier to define flexible widths and heights in our project.

Now, the good thing is that we can declare box-sizing once in our

style sheet with the universal selector,

then box-sizing will sort of work its magic throughout our project.

So, let's scroll up to the top of our style sheet.

And right above the body rule,

let's create a new rule using the universal selector.

And inside the universal rule, I'll go ahead and

paste the box-sizing declaration we copied earlier.

Now, in the selector stage, I mentioned that the universal selector for

the most part is considered bad practice.

Well, universal selectors are bad only when they are misused, but

I'd say this is a good use case for it.

So, now with box sizing defined universally,

it's one less thing to worry about when laying out our page.

So, now that it's defined up here, we can actually go back and

remove the repeated box-sizing declarations in our main header rule and

in our primary-secondary content rule.

So, let's go ahead and remove it from the main header rule, and

we'll scroll down and remove it from the primary and secondary-content rules.

And while we're here, let's change the width back to a percentage value.

So, instead of 960 pixels, let's now set it to 75%.

And one last thing we'll need to do for

our content width is prevent it from becoming too wide.

Now currently, the width is now set to be 75% of the total browser width,

so it's very fluid and constantly adjusting to the browser's width.

But what if we're viewing the page on a screen that's much wider.

Well, the content may display too wide for good readability in that case.

So, because of that,

we're able to limit the width of our content with the max-width property.

So, let's go back to our primary and secondary-content rule and

let's give these content elements a max-width property.

And we don't want them to get any wider than 900 pixels, so

let's set the max-width value to 900 pixels.

Now, what this does is, once our content div expands to 900 pixels wide,

the max-width value sort of overrides that width value.

So, the elements stay fixed at 900 pixels even if the browser keeps getting wider.

So, in our browser, notice the content is fluid at 75% of the browser width.

But once the browser detects that the divs are 900 pixels wide,

they stop expanding right about here and they remain fixed at 900 pixels.

So, this prevents the width of our content from becoming wider than it needs to be.

But if we once again resize the browser to a narrower width,

the content is once again fluid at 75% wide.

[BLANK_AUDIO]

The max-width property is also commonly used to create responsive images.

Now, you might have noticed that the two images in

our content at times are too wide for their containing div elements.

So, for instance, here we're reducing the width of our browser, and

we can see these images breaking out of their content divs.

So, to prevent this from happening,

we can give our image elements a max-width property.

So, let's go back to our style sheet and let's scroll up here to our base styles.

So, right here beneath the h3 rule,

let's target the image elements on our page by using the img type selector.

Then we're going to add a max-width property and

we're going to set the max-width to 100%.

So, when we set this max-width value to 100%, then refresh the page,

notice how the image is now fluid, and

it proportionally adjusts according to the width of its containing div.

So again, a really handy feature for creating responsive imagery.

And we'll see the benefits of this in a later video when we

lay these out as columns.

Now, before we move on, let's go back to our style sheet and apply a bottom margin

to our images to create some separation between the image and the content below.

So, right beneath the max width declaration, let's add

a margin-bottom property and let's set the margin bottom value to 20 pixels.

[BLANK_AUDIO]

All right.

That looks a lot better.

[BLANK_AUDIO]