Header/footer in IE 6 shifts to the Left

I am new to WordPress and am using a 3 column variant of the Relaxation theme. In all major browsers, the theme looks good with no issues.

All was well until I added a nav bar in the header.

It looks fine in Firefox and Safari, however in IE 6 the Header and footer is shifted to the left approx 5-10px.

From all of my reading in this forum it is clear that it is fairly normal that IE issues arise. However I have not found a clear answer on my own.

Here is a link to the css style sheet: http://www.jimporett.com/blog/wp-content/themes/relaxation_3column/style.css

Here is the CSS code I added specifically for the nav bar:
.container {
padding-top: 0px;
padding-left: 527px;
padding-right: 30px;
margin: 0px 0 0px 0;
background: none;
}

#miniflex {
width: 100%;
float: left;
font-size: small;
margin: 0;
padding: 0 10px 0 10px;
border-bottom: 1px solid #333;
}

#miniflex li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

#miniflex a:link, #miniflex a:visited {
float: left;
font-size: 85%;
line-height: 20px;
font-weight: bold;
margin: 0 13px 0 10px;
text-decoration: none;
color: #999;
}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
border-bottom: 4px solid #333;
padding-bottom: 2px;
color: #333;
}

Here is the code I added to the header for the navbar:

<div class="container">
<ul id="miniflex">

<li><a href="#">home</a></li>
<li><a href="#">news</a></li>
<li><a href="#">links</a></li>
<li><a href="#">photos</a></li>
<li><a href="#">about</a></li>
</div>

(the href links have not been added yet as this is still the construction phase)

Any wisdom on how to get this to appear the same in IE as it already does in Firefox and Safari is welcomed!