Header Image - Not positioned correctly - Not Validating

[renet]

I am looking for a 1/2 inch space between top of header image and top of browser AND a 1/4 space between bottom of header image and top of content area (bottom of header). i.e.: Rather than centering the header image in the header area I would like more space at top of header image and less space at bottom of header image. (does not have to be exactly 1/2 inch or 1/4 inch).

Upon doing css validation it gave 4 errors shown below

Here is the CSS code:

body { margin:1px; font-size:1.0em; line-height:20px; background-color:#000000; font-family: "Trebuchet MS", "Myriad Pro", Arial;}
a { color:#ffffff;}
a:hover { text-decoration:none;}
#container { background: url(images/) 0px 50px #000000;}
#header { background: url(images/header.jpg) #000000;background-repeat:no-repeat;
background-position: relative; 2% 1%; margin: 20px 0 0 0;}

Here are the validation errors:

15 #header Value Error : background-position relative is not a background-position value : relative
15 #header Parse Error 2% 5%;
15 margin Parse Error margin: 20px 0 0 0;
15 margin Parse error - Unrecognized ;}

Thanks!

[SuzyUK]

renet, do you have the HTML, for the header too.. it will be easier to explain which element to put margins onto

re: the validation errors
as it says relative is not a valid value for background position so remove that

then the ";" after the word "relative" should also not be there and it's that I think which is causing all the other 3 parse x errors

[renet]

Suzy,

thanks.

It validates now.

I have fixed the following:

Header.jpg was fixed by doing this:

#logo { padding:20px 50px 45px 1px; text-align:left; }
the prior values were: 45px 50px 50px 50px

I don't know why adjusting the padding of the #logo(which is really the blog title) would alter the spacing of the header.jpg but it did.

Also,

#container.. got rid of everything in that and once all the stuff was gone it validated. Now I have (shown below):
I really have no idea what (container) is for. It is completely empty and now my header works better!

body { margin:1px; font-size:1.0em; line-height:20px; background-color:#000000; font-family: "Trebuchet MS", "Myriad Pro", Arial;}
a { color:#ffffff;}
a:hover { text-decoration:none;}
#container {}
#header { background: url(images/header.jpg) #000000;background-repeat:no-repeat;
margin: 20px 0 0 0;}
#logo { padding:20px 50px 45px 1px; text-align:left; }
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:45px; font-size:30px; text-transform:uppercase;float:right}
#logo a:hover { }