Please remove the
float:left;
property from the
#site_footer footer {
}
CSS class and it should all work fine for you.
In essence, you #site_footer footer class should look like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
margin: 0 auto;
padding-bottom: 0px;
text-align: center;
}
You #site_footer footer class currently looks like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
float: left;
margin: 65px auto 0px;
padding-bottom: 10px;
text-align: center;
}
What can be the reason to have both width
and min-width
properties (that too with wide differences in values). Keep one width property value (either width
or min-width
). Similarly, why float
after clear
? Understand that clear
is used to remove any previous floats. If you want to continue floating, there's no reason to write clear: both
Hope this helps!!
EDIT: Please see the screenshots below!!!!
If you remove the float:left, your footer div will be centered. In case you can't do it, you can overwrite the float:left property in your CSS file as such:
#site_footer footer {
float:none !important;
}