Alright, I've in the process of learning CSS, but I've hit tons of barricades along the way.

This is my latest:

#header{
background-image:url(images/blackwhite.jpg);
background-repeat:repeat-x;
height:50px;
margin-top:-20px;
margin-left:-20px;
margin-right:-20px
}
#header p{
margin-top:20px
}
#content{
margin:auto;
}
#footer{
margin:auto;
}

With that, I get my top image to completely fill up the top and sides, but there is a x-scrollbar at the bottom which is annoying. When I add "overflow-x:hidden" it just reverts back to how it was before (without the

height:50px;
margin-top:-20px;
margin-left:-20px;
margin-right:-20px

)

So my question is: How can I remove the x scrollbar without messing up my page?

edit: OH also, if you'd like to help me on any other questions about CSS, please PM me either your AIM or MSN messenger address, so I can add you! Thanks!

Okay, several things to try..
for one keep in mind that different computers with different operating systems and browsers will display stuff differently... perhaps the best bet is to make your background color the same as the background of you image, and make your image slightly smaller.
Also maybe you could experimenting with trying to take out the "repeat-x" part.

I want the image to repeat-x though, it wouldn't make sense to do that...

I just want to know how to remove the x-scrollbar without messing up my page.

don't mess about about with negative margins

In order to figure out why you are getting scrollbars, we really need to see the rest of the code

We'll need more code or a link to the page in question, but I suspect Chris is right and it's the negative margins that are causing your problem

Alright, I've uploaded it: http://www.cheapcss.com

To see the HTML, right-click, view source.

As for the CSS:

#header{
background-image:url(images/blackwhite.jpg);
background-repeat:repeat-x;
height:50px;
margin-top:-20px;
margin-left:-20px;
margin-right:-20px;
}
#header p{
margin-top:20px
}
#content{
margin:auto;
}
#footer{
margin:auto;
}

The problem is mostly the negative margins. Get rid of those and also the 20px margin on #header p. To make things go to the edge of the window add body {margin:0}

Here's all your code rewritten:

body {margin:0}

#header{
background-image:url(images/blackwhite.jpg);
background-repeat:repeat-x;
height:50px;
}

#content{
margin:auto;
}

#footer{
margin:auto;
}

See if that works to do what you want.