Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations The Box Model Width, Height and Overflow Properties

Posted by Natalie Thomas
Natalie Thomas
7,024 Points

Box model problem

"Currently, the width of the div with the class main is set to 400px, but the padding applied is adding an extra 40 pixels to its total width. Add a property that forces the padding into the width of the div."

The answer is not:

main{ max-width:400px; }

or

main{ box-sizing: border-box; }

or

main{ padding-width:inherent; }

After two days of re-watching and researching, I simple can not find the answer to this challenge. Can anyone help me understand this? Thanks!

2 Answers

Andrew Corcoran
Andrew Corcoran
20,552 Points
Andrew Corcoran
Andrew Corcoran
20,552 Points

Hi Natalie,

You'll need to set the box-sizing property of the main div. See the below example as well as the possible values of the box-sizing property.

box-sizing: border-box;

content-box This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height

border-box The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties

inherit Specifies that the value of the box-sizing property should be inherited from the parent element

Robert Goddard
Robert Goddard
15,019 Points
Robert Goddard
Robert Goddard
15,019 Points

Try:

main { padding: 0px }

Not sure if this will work, but I think that if you get rid of the padding, the "box" should be the same size as the width.