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.

HTML Build a Simple Website Creating a Website Structure Working with Grids

Murguz Tagiev
Murguz Tagiev
1,921 Points

Couldn't center the page.

I did everything as it was instructed on the video, but the page remained as wide as it had been before. Could you tell me where is the problem? Thank you in advance

3 Answers

Adam Moore
Adam Moore
15,825 Points

Not sure where you are in the code... But to center a container you need to make sure to give your wrapping container a width and a margin of 0 auto.

div { width: 1024px; margin: 0 auto; }

If you're setting the margin but not the width it will always be 100%. If you set the width but not the margin it will constrain to the width but be stuck to the left if the page instead of being centered.

Hope that helped. If not, show some code with Codepen or paste in here.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

You need to wrap the page content in a container div -- see 1:20 into the video (http://teamtreehouse.com/library/build-a-simple-website/creating-a-website-structure/working-with-grids). An opening <div class="container"> goes just after the <body> and a closing </div> goes just before the closing </body> at the bottom of the page.

There's a class in the CSS for that project (see 2:30 into the video) that sets the width and centers the page:

.container {
  width: 1000px;
  margin: auto;
}

Just make sure you add the <div> correctly. Make sure you spelled everything correctly and placed the opening and closing <div> tags in the correct place (just after opening <body> and just before closing </body>.

Murguz Tagiev
Murguz Tagiev
1,921 Points

Ok, thanks. Will try to get everything right.