How to center header image

Not sure what part of that actually applies to your header image? As the logo.png image there is commented out.

Regardless, centering horizontally is accomplished by margins

margin: 0 auto; usually does it

I’m sorry, yes it is the logo I’m trying to fix, and adding margin to it did not move it at all. Is it possible that the left/right alignment is being set somewhere else?

oh…you’ve got it position:absolute….why? I’m not sure if that interferes with auto margins…..

how do you want to center a 1275px wide image in a 960px wide div ?
however, your attempt with ‘position:absolute;’ is a good start.
you need to give a ‘position:relative;’ to #header, the div where the #logo is in, so that the absolute position is referenced to that. and set a ‘left:’ position:

#header {
height: 250px;
position:relative; /*new*/
width: 100%;
}
#logo { margin: 0 }
#logo a {
/* background: url(images/logo.png) no-repeat; */
cursor: pointer;
position: absolute;
top: 0px;
left:-155px; /*new - adjust to your needs*/
/*margin: 0 auto;*/
display:block;
}

It’s position was absolute by default of my them, but it didn’t affect it when I took it out. My previous image was 960px wide and it was centered. This image is 1275px wide I think.

it should work as suggested, using ‘position: absolute;’ and ‘left:-155px;’ to push the logo image into place.

“how do you want to center a 1275px wide image in a 960px wide div ?”
I’m figuring things out as I go… clearly, I have no css experience whatsoever so this forum has been a lifesaver. I’d like to ask you just one more question which I think should be an easier fix. If you look in the upper right of my logo, there is a small link that says ‘read more’. Do you know where I can find that to remove it? I looked in my style sheet and didn’t see anything that said read more. Thanks again for your help!

it’s this code in header.php just below the logo stuff:

<div id="hi">
	<p class="nomargin"></p>

	<p><a href="#">read more</a></p>

</div>

delete it there –
or add
#hi {display:none;}
to style.css to make it dissappear.

Great. Thanks!