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 trialLuca Edexia
9,718 PointsSet the wrapper's width to 80% of the browser width. Then use margins to center the wrapper in the browser.
How Can I resolve this task?
Thanks in advance.
9 Answers
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 PointsSo in first task you had to add a wrapper div with container class :
<div class="container">
<div class="main">
<h2></h2>
<p></p>
<p></p>
</div>
</div>
So now in task 2 add a width style to container class and set margins to center it:
.container {
width: 80%;
margin: 0 auto;
}
This should do the work ;)
Aishah Griffin
5,476 PointsI did this and it worked for me
.container {
width: 80%;
margin: auto;
}
Peter B. Sims
Courses Plus Student 2,896 PointsThanks. That worked for me too!
Adrian Dancau
20,633 PointsYes , that’s the correct answer !
Motuma Kaba
11,960 PointsI did this way and it did not work for me, I used Krzysztof Kucharzyk answer and it worked fine. The part that i could not understand is the margin. .container{ width: 80%; margin: center; }
why the margin did not work the way i tried? Thank you in advance.
Jack Cummins
17,417 PointsIt worked for me too!
Leah Stigale
3,349 PointsOld thread, but just wanna say .container{ width: 80%; margin: 0 10%; } does not "count" as a solve. In case anyone is googling this and did the same thing.
Roberto Rivera
10,832 PointsAnd you put this in the index only, correct?
Ayman Omer
9,472 Pointsyou have to add on css: .main , .container{
width: 80%; margin: auto; }
Sumana Vittal
4,909 Points.container { width: 80%; margin: 0 auto; } I tried this but it didn't work. Then tried commenting my part and copy-pasting as suggested by Haisam Elkewidy and it worked. I don't know how it worked for copy pasting and not for manually written code.
Haisam Elkewidy
26,987 PointsSo here's an interesting tidbit. I typed in a solution that I found here, and the challenge would not be completed.
When I literally copy-pasted it from a comment and into the editor, it took that as a successful submission.
Not sure what happened there, but okay. I guess plagiarism is completely fine LOL.
Lori Froedge
10,217 PointsHaisam, the same thing happened to me; I'm not sure why it wouldn't accept my answer when typed, which was identical.
Mercedes Aker
6,544 PointsMercedes Aker
6,544 Points<div class= "container"> class.container { width: 80%; margin: auto; }
This wasn't working...Anyone see why? (FYI, the end </div> tag is near the end of the page inside the body). This code is also inside the body tag. Is it supposed to go outside of it?