css problems positioning divs

After scouring the net i’ve not yet been able to find a solution to my problem if anyone can help i would be most thankful.

I am building my first website to be launched online and i have run into a complete wall.
The problem is with my lack of understanding of how to position my images where I want them. I have a floated

with 12 images in and a containing

to control them since they were moving all over the layout in the browser. I have a 1

for my logo and one for my navigation bar which are side by side, underneath are my images (green stand-ins) that i want central in the browser but they keep moving to the right of the browser and of screen therefore anyone with a smaller screen will have to scroll horizontally to see them all.
what i’m trying to achieve is to have my green stand-in images fit on the average size browser window without scrolling ( so they’d be up against the left wall or better still lined up in the middle of the browser window).

Here is an image illustrating my dilemma:

http://imageshack.us/photo/my-images/846/helpcss.gif/

Here is where my html and css code is at:

CODE

• About


• Contact


• Blog

@charset “UTF-8″;
/* CSS Document */

.header{
width:358px;
height:333px;
top:25px;
left:25px;
float:left;
}
.aboutme {
position:absolute;
top:200px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}
.contactinfo {
position:absolute;
text-align:center;
left:25%;
top:200px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}

a {text-decoration:none}
//

ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#999;
color:#000;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:2px solid fff;
}
ul#list-nav li a:hover {
background:#0F0;
color:#000
}
ul#list-nav currentpage a {background:#0F0;
color:#000;
}
.nav {font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#000;
border:none;
position:absolute;
top:126px;
left:358px;
float:left;
}
div.workfloat p {
text-align: center;
}
div.workfloat {
float:left;
width:200px;
height:200px;
border-left:2px solid fff;
margin:5px;
}
.container {
margin-top:335px;
width:850px;
height:100%;
clear:left;

I may be missing something very obvious but the solution still eludes me if anyone can see any way for me to achieve my goal I would be really greatful.

Thanks.

http://bit.ly/kAr0mf