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

gene c
gene c
13,630 Points

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

}

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

Troy Mosby
Troy Mosby
3,253 Points

What dimensions are you getting?

6 Answers

Max Senden
Max Senden
23,141 Points

Hi 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
Sean Gibson
38,358 Points

My 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
Rouillie Wilkerson
10,407 Points

I'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
Alexandra Cianciara
2,465 Points

I 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
Rouillie Wilkerson
10,407 Points

Under inspection, the margins on mine didn't match Guils, either. However, he did say "similar" not exact! In that aspect, it matches!

I'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
Steven mudie
5,523 Points

my dimensions are: content: 2554x300 padding: 67.200 border: - margin: 8

using chromium, ubuntu, 1440p resolution

Asanka Pathirana
Asanka Pathirana
2,295 Points

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