IE and FF/Chrome css difference, Help with padding Options

[phoenixpyre]

I can situate my coding as perfect as I would like it, and then I remember... I have to look at it in Internet Explorer, and there's always an issue.

I padded the left side of the container div layer by 21px and nothing but the header is affected incorrectly in IE. I don't understand what's wrong and I'm getting too frustrated to deal with it. Can anyone help?

this is the style for the body, container, and header:
body {
margin-top: 0;
padding-top: 0;
background-color: #4aa5ff;
text-align: center;
background-image: url(images/body-background.gif);
background-repeat: repeat;
background-attachment: scroll;
}

#container {
width: 991px;
height: 900px;
background-image: url(images/content-background.gif);
background-repeat: repeat-y;
margin: auto;
padding-left: 21px;
padding-top: 0;
}

#header {
padding: 0;
margin-left: 0;
width: 949px;
height: 177px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-align: center center;
}


and the site is @ http://pyr0tech21.webs.com/

[synapse]

While you're making a style.css for firefox, safari, opera, ie8.. you'll also create additional 2 stylesheets for ie browsers less than ie 6, 5.5, 5.0 and for ie 7. Where you'll make sure that your style.css makes everything look perfect in firefox, safari, etc. Then you'll basically start over for the ie.css and the ie7.css