center footer

[millerinna]

Already try all advises posted over web and unfortunately nothing is working.

footer goes a bit on right. funny thing that when i try to move it with margin i can see it straight in my web-browsers (chrome, safari) and other users not.

so now it is like this
#footer {
max-width: 838px;
background-color: #F9F4D4;
display: table;
width: 88.1%;
margin-bottom: 0 !important;
margin-left: 269px;
margin-right: 0 !important;
margin-top: 0 !important;
position: relative;
}
and it’s straight for me.
site – http://www.machigling.org

What I am doing wrong?
Will really – really appreciate any help!!!

[Beverleyh]

Just looking at the CSS you’ve posted (I’m on mobile), have you tried setting the left and right margins to “auto”? Attempting to push it in to place (269px) will only get it looking central on one size monitor/screen.

[millerinna]

i did, then footer too much on right side

could it connect somehow with my wrapper code? it’s like this:

#wrapper {
margin-bottom: 0 !important;
margin-left: 3%;
margin-right: 0 !important;
margin-top: 0 !important;
width: 88.1%;
background-color: #F9F4D4;
}

.home #wrapper {
background-color: #F9F4D4;
padding: 20px 20px;
margin-left: 3% !important;
margin-right: 0 !important;
}

even though i tried to make a 3% for footer it is still not in the center.

thank you for your reply, really appreciate it

kinda disappointing

[Beverleyh]

Looks like you have

margin-left: 3%;
margin-right: 0 !important;

on a few container/wrapper elements so, if I were you, I’d work down them all and set them to “auto”.

Having the unequal values on left and right margins will play havoc with making things appear central.

Try to remove all the !important overrides too in case they’re impacting from further elsewhere in your stylesheet.

[millerinna]

Yeah that’s works!
But now same thing with header that must be the reason why wrapper need to be moved
I set margin to “auto” for header too, but it doesn’t work.

I am using child theme and in parent i have this for my header:

#header {
margin: 0;
}

/* =Header
-------------------------------------------------------------- */
#logo {
    float: left;
    margin: 0;
}

.site-name {
    display: block;
    font-size: 2.063em; /* = 33px */
    line-height: 1.0em;
    padding-top: 20px;
}

.site-name a {
    color: #333333;
    font-weight: 700;
}

.site-description {
    color: #afafaf;
    display: block;
    font-size: 0.875em; /* = 14px */
    margin: 10px 0;
}

Should I override it?

[Beverleyh]

Your header image has more transparent space in it on one side, so the actual image in centred, but what’s inside is unbalanced.

[millerinna]

Beverleyh, thank you so much!!

I wouldn’t figure it out by myself

[Author]

Posts