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

Box inspector showed different dimensions from mine yet coding was the same

So, i'm a little confused after the practice for the box sizing in the CSS course. I did all the coding correctly (or corrected it if needed during the 'how to' video), with one exception - i added a p {color:white} bc my text wasn't showing up as i'd added colour further up. At the end, when the box is shown in the development tool, my dimensions were different - i was feeling quite happy about it all until then, as now I'm wondering what i'm not getting! Would appreciate any possible explanations. Thank you

Hi catrina stewart,

Is there any chance you could fork your workspace, or provide a link to your repo. It’s difficult to tell why your results may have been different without being able to review your code.

My guess would be that there was a typo somewhere in your css file.

Or perhaps, you didn’t use the box-sizing property. In the intro video Guil hints that he hasn’t gone over that property yet.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Maybe that info helps. If not, like I said, send a link to your code (or you could even copy/paste it here) and I’m sure that together you and I could get to the bottom of this.

Happy coding.

2 Answers

Mow Larnin
Mow Larnin
4,318 Points

I had the same issue when i went to chrome dev tool. However I got it fixed. What you have to do is click on the CSS Panel, there start to uncheck the properties and check them again, this should somehow refresh things and give you the correct figures.