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
Jorge Vega
Front End Web Development Techdegree Student 2,905 PointsI can't get the box dimensions right.
I entered all the code properly but when I inspected the box with the developer tools and the margins keep showing a different number. Does anyone know why?
Thank you in advance!
This is my code:
/* Apply a fluid width of 90% and a height of 300px. The width of .box should get no wider than 600px. */
width: 90%; height: 300px; max-width: 600px;
/* Add 20 pixels of padding on all four sides. */
padding: 20px;
/* Apply a 2px solid border to each side. */
border: 2px solid;
/* Use margins to center .box on the page. */
margin: 0 auto;
/* Prevent the contents of .box from overflowing. */
overflow-y: auto;
/* Force border-width and padding values into the total width and height of .box */
box-sizing: border-box; }
4 Answers
Jamie Reardon
Treehouse Project ReviewerThe margins show different numbers because of the auto calculation being set, the value auto will let the broker do the calculations instead. When you resize the browser window, your margins will have a different size.
Think of it this way, the margins are being calculated by taking up the remaining width size of the browser window AFTER the 600px has been taken into account. The browser uses the space available and calculates the margins for the browser width and the box taken into account
Did this help you?
Jamie Reardon
Treehouse Project ReviewerHave you tried force-refreshing your browser?
Jorge Vega
Front End Web Development Techdegree Student 2,905 PointsHi Jaime!
I did refresh the but my margins are different. What do you think it could be the problem?
Thank you@
Jamie Reardon
Treehouse Project ReviewerI misunderstood your original question, so you are curious why the margins show different numbers on the left and right sides?
Is your box a 600px wide dimension, when you inspect its width?
Jorge Vega
Front End Web Development Techdegree Student 2,905 PointsHi!,
Yes, it is 600px
Cheers!