FAQ: The Box Model - Auto

Sorry but i didn’t find out how to ask my own question so i just used reply.
Why do we need to give a width to the element for CSS to be able to center the element from the left and right borders of its container using the ‘‘auto’’ value? Because if we just use the ''margin-left" and “margin-right” properties we can do it without giving a width property to the element.

margin is fixed to whatever we set it. auto is not fixed but creates equal margins on both sides. The alternative is to use percentages for the margins but this also has an effect on container width when the browser is re-sized. auto handles this much more cleanly without affecting the container width if it is fixed.

There is a fine line that separates the two methods, as both are valid. Design preferences factor into our choice to use one over the other. There is no one better way.

Bottom line, be sure to test your document in all manner of device sizes to be sure the layout doesn’t break (responsive design), or at least breaks gracefully (adaptive design).

I was playing around a bit and tried to set the style to this:

#main {
padding: 40px;
text-align: center;
width: 400px;
margin: 1 auto;

I was quite surprised that the whole box was moved to the left no matter the number it was (1, 10, 100). Does that mean I cannot use different number than zero?

Not exactly, no. It means CSS does not recognize the number if it has no unit. All numbers must have a unit, save for zero. Since zero is undefined, it has no unit that can be applied (logically).

margin: 0 auto;

margin: 10px auto;

sorry I didnt understand your answer.
Why do i have to use width in order to auto center margin?

i just found in the w3schools that to center the element horizontally you don’t need to put 0 you can just write margin: auto;

so may someone explain are there any difference between
margin: 0 auto; and margin: auto;?

The first instruction of this lesson tells you to set the width of .pull-quote to 350 pixels.

When I run this code it does not accept it as correct. Am I misunderstanding the instruction?

.pull-quote {
  width: 350px;

Few questions: @mtf you there my friend?

  1. Why not
#main {
  margin: 0 0;
  margin: auto auto;
  margin: auto 0;

why is it 0 for top and bottom and auto for left and right?
Thanks in advance,

In any compound property, there is a set order.

 border-width: 1px 2px 3px 4px

The above sets all four borders with their own thickness. The order is as follows,

top left bottom right

Always. When we compress it further,

border: 1px 3px

Now the top and bottom are the same, and the right and left are the same.

top/bottom  left/right

In margin: 0 auto the top and bottom have zero margin, the right and left are balanced out to be nearly the same, assuming the width is less than the parent’s width.

.parent {
    width: 100%;
.child {
    width: 90%;
    margin: 10px auto;

We can set the margin to any size, not just 0. Zero margin top and bottom means there is no gap at top or bottom.

I don’t understand this either?!! :cold_sweat:

What don’t you understand?

“Set the width of the .pull-quote class elements to 350 pixels.”

which I’ve put,

.pull-quote {

width: 350px;


And it just keeps asking to try again… I’m probably just missing something but I’ve tries so many way which does not solve anything and the question is only asking to set the width of 350px to the element so why would it have to be more complicated than that?:exploding_head:

Hi, I’ve been stuck on this for a week now!! Can some help me please!!!

Is there something wrong with this exercise??? I’ve got to the point where I have to click “View Solution” which will then automatically put in the code for me which turned out to be the same as what I’ve been trying to submit for the last 7 DAYS!!! If that is the case then it’s wasted a whole week of my time!!

This practice in section 10 “Auto” did not teach me anything! In fact I am left with even more confused to why the content has all been centered when all we were asked to do was " Set the width of the .pull-quote class elements" which to me looks like it’s a child div of the “.content” div which is the parent??

If I wasn’t wrong on any of this then I am very CROSS and very disappoint as time is precious!!!

This exercise? https://www.codecademy.com/courses/learn-css/lessons/box-model-intro/exercises/box-margin-auto

I’ve just tried it on both Firefox and Chrome, and it worked.

Could you tell me which browser you’re using? Out of curiosity

well it doesn’t for me for the last 7 days and still until this very moment! :triumph:

I understand your frustration, but there’s got to be an explanation to this.

Which browser are you using?

Also, check this out:

Disabling AdBlock in Chrome worked for him.

I’ve followed the instruction guid for how to do that but my chrome browser doesn’t appear to have an Adblock so I am going to skip it as I have wasted too much time on this already!

This is also happening to me. I knew I was right though so I just checked the answer anyway. Just to make sure. it must be some sort of error or glitch or whatever, just hit check answer box and move along,

When setting the margin property of an element to 0 auto, this will center the element’s box within its parent element. However, the actual content inside the element will not get centered. To center the content itself, you would have to use the text-align property and assign the value center to it