Background not expanding with my gallery part 2

[Wes]

Alright now that I have cleaned up my code and found a decent option for displaying my work rather than some fancy gallery I am still having the problem of unordered lists not making my background expand
I can solve it with breaks but I would prefer to learn why it is doing this
http://www.wesascolese.com/portfolio.php

here is my html

Code:

• Home
• Portfolio
• About
• Contact

• 
• 
• 
• 
• 
• 
• 
• 

© Copyright WesAscolese.com All Rights Reserve

and here is my CSS

Code:

body
{
background:url(images/bg.jpg);
font-family:Verdana, Geneva, sans-serif;
font-size:68.5%;
}

h2
{
font-size:1.6em);
color:#827857;
text-transform:uppercase;
}

h3
{
font-size:1.4em);
color:#827857;
text-transform:uppercase;
}

h4
{
font-size:1.2em);
color:#827857;
text-transform:uppercase;
}
#page-wrap
{

width:800px;
margin: 0 auto;
background:url(images/main-bg.jpg) repeat-y;
}

#header
{
margin:0 auto;
background:url(images/banner.jpg);
width:800px;
height:155px;

}

#header ul
{
margin:0 auto;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:2.0em;
font-weight:bold;
margin-left:150px;

}

#header ul li a
{
display:block;
width:100px;
float:left;
color:#fff;
margin:100px 0 5px 0;
text-decoration:none;
text-align:center;
}

#header ul li a:hover
{
color:#e8e4d8;
}

#main
{
width:450px;
margin:0 auto;
}

#main p
{
color:#827857;
}

.gallery ul
{
margin:0 auto;

list-style:none;
}

.gallery ul li img
{
float:left;
height:50px;
width:50px;
background-position:50% 50%;
margin:5px;

}

#footer
{

margin:0 auto;
background:url(images/footer.jpg);
width:800px;
height:191px;
}
#footer p
{
text-align:center;
padding-top:30px;
color:#FFF;
font-size:0.8em;
text-transform:uppercase;
}

[Author]

Posts