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 The Solution

Shane Phan
Shane Phan
1,436 Points
Posted by 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

Preston Fulford
Preston Fulford
1,610 Points
Preston Fulford
Preston Fulford
1,610 Points

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
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

thanks