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
gene c
13,630 PointsMy box dimensions are totally wrong even though I followed the steps provided.. Where did I go wrong?
Here is my CSS document:
/* =========================================================== Practice CSS Box Model ============================================================== */
.box {
/* 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 #876e1f;
/* Use margins to center .box on the page. */
margin: auto;
/* Prevent the contents of .box from overflowing. */
overflow: scroll;
/* Force border-width and padding values into the total width and height of .box */
box-sizing: border-box;
}
Troy Mosby
3,253 PointsWhat dimensions are you getting?
6 Answers
Max Senden
23,177 PointsHi Eugene,
The only mistake I can find in your code is the margin. You should set it to '0 auto' to center it on the page. The dimensions of your box are as they should be.
Hope it helps, Max
Sean Gibson
38,363 PointsMy case is even more extreme. Perhaps I'm just misusing the browser feature, but not one of my measurements matches the code i entered. I went back and entered everything exactly as Guil did but the browser is showing me a margin of 8, border of 0, padding of 7.2, box 865x344. The box itself looks fine, just not the diagram on the right-hand side. Must be pointing to a different box or something but I don't know how to manipulate the developers tools. Any tips?
Rouillie Wilkerson
10,419 PointsI'd go back and make sure it's saved. Since all of the info is provided. It looks like you did the wrong problem? Here's a scrape of my answer. Your answer sheet should look similar. Note: I didn't use overflow-y: auto. I just entered overflow: auto, and it came out fine.
.box {
width: 90%; height: 300px; max-width: 600px;
/* Apply a fluid width of 90% and a height of 300px. The width of .box should get no wider than 600px. */
padding: 20px;
/* Add 20 pixels of padding on all four sides. */
border: 2px solid orange; /* Apply a 2px solid border to each side. */
margin: auto; /* Use margins to center .box on the page. */
overflow: auto; /* Prevent the contents of .box from overflowing. */
box-sizing: border-box; } /* Force border-width and padding values into the total width and height of .box */
}
Alexandra Cianciara
2,465 PointsI got this and not getting the dimensions as expected, what am doing wrong?
/* =========================================================== Practice CSS Box Model ============================================================== */
.box {
/* 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: 20px solid #8292b1;
/* Use margins to center .box on the page. */ margin: auto;
/* Prevent the contents of .box from overflowing. */ overflow-y: scroll;
/* Force border-width and padding values into the total width and height of .box */ box-sizing: border-box;
}
Rouillie Wilkerson
10,419 PointsUnder inspection, the margins on mine didn't match Guils, either. However, he did say "similar" not exact! In that aspect, it matches!
Joshua Furmanczyk
4,299 PointsI'm also having the same problem where I followed the instructions exactly, In fact I had them coded the exact same as Guil did before watching the "answer" video. However, i thought i got this wrong as my content section is 786 x 300. I'm wondering if this has something to do with monitor resolution as the code is literally the exact same as in the answer....aside from my color choice.
.box {
/* 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 steelblue;
/* Use margins to center .box on the page. */ margin: 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; }
Steven mudie
5,523 Pointsmy dimensions are: content: 2554x300 padding: 67.200 border: - margin: 8
using chromium, ubuntu, 1440p resolution
Asanka Pathirana
2,295 Pointschange your view pint and you will get exact dimensions.
Go to developer tool and hit three dots next to the close button and select Dockside option in the right corner as Guil shows in the screen you will get exact dimensions.
happend to me as well.
nicolabell
18,212 Pointsnicolabell
18,212 PointsI also experienced this issue! Adding 0 to the margin property did not seem to resolve the issue of a greater width box than the desired 600px.