Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS The Solution

Shane Phan
Shane Phan
1,436 Points

In the box model png you are meant to replicate, the L-R margins are at 416.5px, which makes the assignment unclear.

I assumed I needed to replicate that box model exactly, AND center the .box at the same time. This gave me a problem that I was trying hard to solve unnecessarily. I feel that it would be helpful for people in the future- if you address the goal more specifically regarding the margin in the png.

2 Answers

I do believe that with the /* margin: auto; */ Property value, the '416.5px' margin is set based on the width of your view port.

Jaspal Singh
Jaspal Singh
13,525 Points

Hi Shan

Any element in css is a inline or block element. Here div with the class of .box is a block level element which by default takes the full width & height of its parent element if we would not define the width and height ourselves. if you remove the max-width property and give it a width:100% and than it will take whole space. Now it has the max-width property, so the space left after giving that will be the margin on right side. After defining the property as margin:auto the browser will calculate the margin from all the sides of the .box and make it center.

NOTE: pls try to inspect the element in the browser and experiment the adding and removing the properties of the element.

you can read explanation on the MDN website. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Hope this will help you