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

Container 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
James Barnett
39,199 Points

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

The container is centered here. Which browser are you using?

Chrome, Mozilla and IE

Which browser are you using?

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

Thanks Marius, I modified the container in grid.css to 800px Finally I could SEE the margins! Silly - they were there the whole time.

Awsome 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
James Barnett
39,199 Points

michelle 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
James Barnett
39,199 Points

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

Oops - sorry. I'll put it back. I'll add your tip about Measurelt!

Cheers, ~M

I put it back + all your tips. Though, given the thread... that's probably redundant....?

Hi James is there a way to post a screenshot on this forum? I may have found a glitch in the classroom.

James Barnett
James Barnett
39,199 Points

michelle salsbury - You can use something like imgur.com to get a link directly to an image and then use the markdown ![alt text](http://path/to/img.jpg "Title") to embed it in a post.

thanks.