Hey there, how'd it go?

Were you able to write most or all of the box model properties and values for

this practice session?

If not, no worries, you can watch my solution, compare it to what you wrote,

and then try to recreate it yourself.

The goal was to get the box model of the box element

to match what's shown in box.png.

Now let's walk through the solution.

First up, to give an element a fluid width,

you set its width property to a percentage value.

In this case, I set width to 90%, then set the height value to 300 pixels.

Now to prevent the width from getting wider than 600 pixels,

I set a maximum width using the max width property and the value 600 pixels.

Next, I applied 20 pixels of padding on all four sides using the padding shorthand

property, which can apply all four values at once, and I use the value 20 pixels.

Then, to set the border styles, I used the border shorthand property and

set the value to 2 pixels solid, and set the color to the hex value, 8292b1.

Next, to center the box component horizontally on the page,

I used the margin shorthand property and set the value to auto,

which automatically calculates equal margins for each side of the box.

Now, applying a fixed height of 300 pixels to box caused its contents to overflow.

So I used the overflow property to handle the overflowing content.

And setting the value to auto prevents the contents of the box from overflowing

by clipping or cutting out any overflowing content.

So any time there's content that's not immediately visible,

the browser provides a scroll bar to let you scroll and view the content.

You could have also used the value scroll, which will always display a scroll

bar instead of letting the browser decide when to display it.

And to make sure that you're just displaying a vertical scroll bar,

you can use the property overflow-y.

Finally, the box has an extra 44 pixels applied to its total width and

height, because of the padding and border with values applied to it.

But we need box to be exactly 300 pixels tall and no wider than 600 pixels.

To adjust this, you could manually subtract 44 pixels from the max width and

height values of box.

But instead I challenged you to use a CSS box model feature that automatically

includes any border width and padding values into the total width and

height of an element.

And that feature is box sizing, which, as its name suggests,

alters the size of a box.

In the style sheet, I used the box-sizing property.

And setting the value to border-box forced the padding and

border width values into the specified width and height of box.

So now if you inspect the box element in your development tools,

you should see that the dimensions match the diagram shown in box.png.

And your page should look similar to mine.

I hope you were able to complete this practice session successfully.

If not, why not start over and try to write the properties and

values without looking at my version?

I'm also going to teach you more about the box sizing property and

layout in my CSS course.

So I'll see you soon and happy coding.