css display inline problem

I have a problem with the display:inline; css instruction. Below is the relevant css and html all to do with the same page. The #nav inline works ok, the .photo-item doesn't. I've tried changing sizes, tried the float option but can't get what I want.

You can see the #nav working but the photos not at Mike Hayes' Photographs.

Be grateful for any input.

Mike

#nav ul
{
margin: 0;
padding: 0;
list-style: none;
}

#nav li
{
display: inline;
margin: 0;
padding: 0;
}

.item {
margin: 10px;
padding: 10px;
border-bottom: 2px solid green;
border-right: 2px solid green;
}

.item p {
margin: 20px;
}

.item li {
margin-bottom: 20px;
}

.photo-item {
font-size: small;
}

.photo-item ul {
list-style: none;
}

.photo-item li {
display: inline;
}

<div class='item'>

<div class='photo-item'>
<ul>
<li>
<A HREF='sp-1.html' TARGET='_blank'>
<IMG SRC='images/tspar-1.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Where's my grub?
</li>
<li>
<A HREF='sp-2.html' TARGET='_blank'>
<IMG SRC='images/tspar-2.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Mum on finals.
</li>
<li>
<A HREF='sp-3.html' TARGET='_blank'>
<IMG SRC='images/tspar-3.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Are you ready?
</li>
<li>
<A HREF='sp-4.html' TARGET='_blank'>
<IMG SRC='images/tspar-4.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Touchdown
</li>
<li>
<A HREF='sp-5.html' TARGET='_blank'>
<IMG SRC='images/tspar-5.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Bon appetit
</li>
</ul>
</div>

</div>