Set the wrapper's width to 80% of the browser width. Then use margins to center the wrapper in the browser.

So 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 ;)

I did this and it worked for me

.container {
    width: 80%;
    margin: auto;
}

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

It worked for me too!

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

And you put this in the index only, correct?

you have to add on css: .main , .container{

width: 80%; margin: auto; }

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

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