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
Minsoo Park
353 Points#wrapper { max-width: 940px; margin: 0 auto; } I did this code and its still not moving the fonts to the middle
need help
Minsoo Park
353 Pointsthank you so much tyler! u da best
tylerpostuma2
5,175 PointsNo problem! Good luck!
Minsoo Park
353 Pointsu fixed the problem but how come margin: 0 auto didnt do the trick?? i need an explaination1!
tylerpostuma2
5,175 PointsThat's because you didn't specify the width of the parent container. When you are using #wrapper you need to specify the width that the margin can work with, if that makes sense :) Basically what you're doing by setting 'auto' as the second parameter is you are telling the browser that it needs to set the left and right margin to be equal, therefore centering it. When you don't specify how big the container is, the browser won't be able to set the margin.
Minsoo Park
353 Pointscan u elaborate what u mean by container? for example
wrapper {
max-width: 940px;
margin: 0 auto;
} what did i do wrong here? :D ty for ur time
tylerpostuma2
5,175 PointsYeah for sure. So the way that you have it right now, you set your #wrapper to have a max width of 940px. You can't set a margin: 0 auto on that wrapper. To center everything you would have to make another container inside of the wrapper, and set that to margin: 0 auto; The reason for this is that you want to set the contents INSIDE of the #wrapper to be margin: 0 auto; NOT the actual #wrapper.
Hope this helped, just reply if you want further explanation :D
Jason Anello
Courses Plus Student 94,610 PointsHi Minsoo,
There isn't anything wrong with the css. What differences are you seeing on your page vs. what you see in the video?
tylerpostuma2
5,175 PointsWouldn't there be something wrong with the CSS. He's saying that he wants to add the margin: 0 auto; to the wrapper instead of the div inside of the wrapper?
Jason Anello
Courses Plus Student 94,610 PointsThe #wrapper div contains the main content for the page as well as the footer.
Nick wanted this div to have a max-width of 940px and be centered on the page. This causes the main content and footer to be centered because they are contained inside the centered wrapper div.
margin: 0 auto will center a block level element as long as its width is less than the parent so that there is some extra space for the margins to take up.
If there is any kind of problem here it is likely with something else because the css posted is exactly what Nick instructs you to do in the video.
The only thing missing here is that Nick added background: orange to that rule so you could visually see that the wrapper is centered.
1 Answer
Martin Fallon
14,693 Points@Tyler: no and yes. The css is valid, however as you mentioned the margin will apply only to the #wrapper element. In this case it will be the wrapper element itself that will be centered. What Minsoo should have done instead is set the "margin: 0 auto;" to the text element. So if the text element is a P tag for example the margin should be set as so:
p{ margin: 0 auto; }
The css that Minsoo wrote is still valid just that the margin was not targeting the right element.
Jason Anello
Courses Plus Student 94,610 PointsYou're correct that it centers the wrapper element itself. That was the point of the video linked to in this question.
margin: 0 auto; should not be applied to anything else at this point.
tylerpostuma2
5,175 Pointstylerpostuma2
5,175 PointsYou could also do: text-align: center;
This will make it so that all of the text inside of '#wrapper' will be aligned to the center. Hope this helped!