Question

I am making a container called “fullWidthContainer” to put all my articles and crap in it.
It needs to be spaced from the top header and the bottom footer so I have gave it a margin of 40px on top and on bottom.

HTML code:

<div id="fullWidthContainer class="cAlign">
...
</div>

CSS:

div#fullWidthContainer
{
margin: 40px 0 40px 0;
}


.cAlign { width: 960px; margin: 0 auto; }

This is causing all the contents inside to not be aligned in the center. Everything is jacked and aligned to the left.

If I type the above CSS code in this manner….:

div#fullWidthContainer
{
    margin-top: 40px;
    margin-bottom: 40px;
}

.cAlign { width: 960px; margin: 0, auto; }

then it works fine. Why is this? Doesn’t it mean the same thing? I feel like this is something very easy that I missed….

Answer 1

I think it’s because your margin-left and margin-right are not 0 to begin with. In the first code, you set them to 0px. In the second one, you don’t touch them.