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
michelle salsbury
Courses Plus Student 569 PointsContainer won't center - SOLVED!
Resolution: The code was fine. My monitor was just too small to be able to see the margins when the container width was @ 1000px. I reduced the size of '.container' in grid.css from 1000px to 800px and Shuzam!
I could see the margins! The container was centered the whole time just like they kept telling me.
Great tools:
A great way to see where div is to add some debugging CSS code such as .container { outline: solid red; }.
If you are still having issues with centering your div, take a screenshot and post it here so we can see how it's being rendered in your browser.
Also better than creating a test page on your site, create a codepen then other people can "fork" your code, make a version with changes and show you how'd they do it.
I USED A TAPE MEASURE BUT APPARENTLY THIS WORKS TOO MeasureIt 0.4.10 by Kevin Freitas Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
Original Issue:
container won't center:
Same code in body div... http://www.baxter5.com/index2.html http://www.baxter5.com/test.html Links to both css files in folder "CSS" NOTE: I downloaded both these files from Teamtreehouse.com training course and didn't make any changes http://www.baxter5.com/css/grid.css http://www.baxter5.com/css/normalize.css Link to images in folder "img" NOTE: I downloaded all images from Teamtreehouse.com training course and didn't make any changes http://www.baxter5.com/img/logo.gif
14 Answers
James Barnett
39,199 Pointsmichelle salsbury - A great way to see where div is to add some debugging CSS code such as .container { outline: solid red; }.
If you are still having issues with centering your div, take a screenshot and post it here so we can see how it's being rendered in your browser.
Also better than creating a test page on your site, create a codepen then other people can "fork" your code, make a version with changes and show you how'd they do it.
Marius Hauken
1,187 PointsThe container is centered here. Which browser are you using?
michelle salsbury
Courses Plus Student 569 PointsChrome, Mozilla and IE
michelle salsbury
Courses Plus Student 569 PointsWhich browser are you using?
Marius Hauken
1,187 PointsChrome. I think you have to describe your problem more clearly. The div with class of container is centered now. If you wan't the content "more centered" you have to go down on the width of the container..
michelle salsbury
Courses Plus Student 569 PointsThanks Marius, I modified the container in grid.css to 800px Finally I could SEE the margins! Silly - they were there the whole time.
michelle salsbury
Courses Plus Student 569 PointsAwsome tip! Thanks James!
It turned out my code was fine. Which is what everyone kept telling me.
I'm new at this so didn't fully understand what the container was.
My monitor is too small so I wasn't able to see the edges (1000px vs 920px)
I modified parameters in the container in grid.css and BAM!
I don't know that redding the container would have helped. My monitor was just too small (18.25" on diagonal)
Sure I'll use it in the future.
Cheers!
~M
James Barnett
39,199 Pointsmichelle salsbury - In the future you can always measure the size of an element as rendered on your screen in pixels using the browser extension MeasureIt!.
James Barnett
39,199 Pointsmichelle salsbury - It's not generally a good idea to delete the content from your post, it makes the whole thread kinda hard to follow and of less value to newbies in the future who may find this thread and may have the same question as you.
So instead, in the future if you feel the need to mark a thread as solved you can just edit the title and add the text [solved] to the beginning of the thread title.
michelle salsbury
Courses Plus Student 569 PointsOops - sorry. I'll put it back. I'll add your tip about Measurelt!
Cheers, ~M
michelle salsbury
Courses Plus Student 569 PointsI put it back + all your tips. Though, given the thread... that's probably redundant....?
michelle salsbury
Courses Plus Student 569 PointsHi James is there a way to post a screenshot on this forum? I may have found a glitch in the classroom.
James Barnett
39,199 Pointsmichelle salsbury - You can use something like imgur.com to get a link directly to an image and then use the markdown  to embed it in a post.
michelle salsbury
Courses Plus Student 569 Pointsthanks.