Learn Accessibility by Building a Quiz - Step 50

[Kepler]

Tell us what’s happening:
I figured out the answer but I’m just wondering why I need to set margin-top to 0, margin-left and margin-right to auto when the question is asking this, " Set the width of the section elements to 80% of their parent container. Then, use margins to center the section elements, adding 10px to the bottom margin.

Also, ensure the section elements cannot be larger than 600px in width."

Your code so far

section{width:80%; margin-top:0; margin-right:auto; margin-bottom:10px; margin-left:auto; max-width:600px;}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 50

Link to the challenge:

freeCodeCamp.org

[bbsmooth]

@Kepler

just wondering why I need to set margin-top to 0, margin-left and margin-right to auto

I think it was explained in a previous step/course? When you set the side margins to auto on a block element then it will center itself horizontally in relation to its parent.

[Kepler]

Okay I kind of get it… I know that if margin-left and right are set to auto it will center them, but what about margin-top? Why does it set to 0 when the question didn’t ask about margin-top? Does it have something to do with the bottom margin?

[bbsmooth]

@Kepler

section{
  width:80%; 
  margin-top:0; 
  margin-right:auto; 
  margin-bottom:10px; 
  margin-left:auto; 
  max-width:600px;
}

This is what you gave us for your CSS. You set the top margin to 0.

Now, if you were using the shortcut:

margin: 0 auto;

Then the first value is for the top/bottom margins and the second value is for the left/right margins.

[Kepler]

Sorry maybe I should have made it clearer. The hint tells me to set margin-top to 0 but I don’t understand why is that necessary for centering the section elements with margins. I expected to set the margin-top to auto in order to center the elements.

Apologies for taking too much of your time.

[bbsmooth]

Setting the top margin to 0 is not necessary to center an element horizontally. The auto value will not work for vertical centering. You have to use some other technique like flexbox.

I don’t see in the instructions where it is asking you to set the top margin to 0, but I do see that the hint is telling you to. The instructions should probably tell you to set the top margin to 0. But it is not necessary in order to center the element horizontally.

[Kepler]

Thank you so much! I will look into vertical centering and horizontal centering.