I have placed an image in my header and cannot get it to align correctly. It sits flush with the right side of the container and I cannot get it to set back from the edge.

I have tried settting both padding-right and/or margin-right to no avail. If I try margin-right: 24px; or padding-right: 24px; the image just disappears.

Could someone please take a look at my current css styling and tell me what I am doing wrong?

#header {
background: #9AB473 url('../images/my-header-back.gif') right top no-repeat;
border-bottom: 2px solid #ddd;
}

#header p { color: #004b6f; font-size: 15px; font-weight: bold; margin-left: 24px; }

A link would be better.

Hey Tom,

How do you mean? Didn't I use the correct format for using a relative link to an image?

Sorry. I mean a link to the site so we can see all of it.

I am going to remove the .htaccess file so the website can be viewed for a short while so you can take a look at what I am having issues with. Thanks.

I'm such a dork - here is the website address: http://frank-kolb-russia.org

If you are talking about the flags on the right, you can move them left by adding padding-right style to the CSS. The more padding, the further left they will indent.

You have 10 errors on the page. Validate the code to fix the errors reported.

Hi Tom,

I have tried that and it still doesn't work. Also, I have gone through and validated all of my pages (through the CC validation link) and they all come back as passing. Which page got the errors and how did you load it to validate?

Kelly

I deleted the page I had saved and forget. The main page validates.

Anyway. Try margin-right. You can also remove the image from the css as background image and place it into the html in the header with a float-right div.

Interesting, maybe the right is overriding the padding, but in the mean time, here is your background graphic with 3 px added to the right as a work around.