Having trouble centering a div class

Question

I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?

Site is here

It's set up using two classes, one inside the other

First one is called mainFoot:

.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}

Second is page-footer:

#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}

I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.

For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:

.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}

.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}

Answer 1

To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.

To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.

Answer 2

you need to change just this line please see below and put on your CSS and see result

.mainFoot
{
    background-color:#184879 !important;
    height:60px;
    width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}

only change on .mainFoot , footer.span12 and #page-footer

Thanks,