Formatting Slideshow Thumbnails

Question

I am trying to get a row of thumnails to display on 2 rows using a ul class, but for some reason there are spaces between the thumbnails & they wrap onto 3 rows. 
I've tried changing paddings, margins, etc., all via a css rule, but it doesn't seem to apply.  What is a method of changing the spacing between images in an unordered list? 
Here is a screen shot showing two images that go onto a 3rd row.  The container is 800px wide & the images are 85px, so 9 of them should fit. 
And the html:
            <div class="picture-slides-container">
<ul class="picture-slides-thumbnails">
<a href="IMAGES/LARGE/Image1.jpg"><img src="IMAGES/THUMB/Image1.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image2.jpg"><img src="IMAGES/THUMB/Image2.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image3.jpg"><img src="IMAGES/THUMB/Image3.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image4.jpg"><img src="IMAGES/THUMB/Image4.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image5.jpg"><img src="IMAGES/THUMB/Image5.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image6.jpg"><img src="IMAGES/THUMB/Image6.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image7.jpg"><img src="IMAGES/THUMB/Image7.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image8.jpg"><img src="IMAGES/THUMB/Image8.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image9.jpg"><img src="IMAGES/THUMB/Image9.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image10.jpg"><img src="IMAGES/THUMB/Image10.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image11.jpg"><img src="IMAGES/THUMB/Image11.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image12.jpg"><img src="IMAGES/THUMB/Image12.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image13.jpg"><img src="IMAGES/THUMB/Image13.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image14.jpg"><img src="IMAGES/THUMB/Image14.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image15.jpg"><img src="IMAGES/THUMB/Image15.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image16.jpg"><img src="IMAGES/THUMB/Image16.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image17.jpg"><img src="IMAGES/THUMB/Image17.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image18.jpg"><img src="IMAGES/THUMB/Image18.jpg" width="85" height="55" /></a>
</ul>
and the css rule:
.picture-slides-container {
width: 800px;
padding:0px;
.picture-slides-thumbnails {
width: 800px;
float:left;
padding:0px;
margin-top:5px;
margin-left:0px;
Thanks

Answer 1

So I think it has something to do with tables...here is the code from where the table starts.
I feel like there is an easy fix to this, but the solution is evading me. 
<table width="100%" border="0" cellspacing="25" cellpadding="0">
  <tr>
    <td><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="7" align="left" valign="top"><table width="800" border="0" cellspacing="0" cellpadding="0">
          <tr>
          </tr>
          <tr>
            <td>
            <div class="picture-slides-container">
<ul class="picture-slides-thumbnails">
<a href="IMAGES/LARGE/Image1.jpg"><img src="IMAGES/THUMB/Image1.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image2.jpg"><img src="IMAGES/THUMB/Image2.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image3.jpg"><img src="IMAGES/THUMB/Image3.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image4.jpg"><img src="IMAGES/THUMB/Image4.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image5.jpg"><img src="IMAGES/THUMB/Image5.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image6.jpg"><img src="IMAGES/THUMB/Image6.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image7.jpg"><img src="IMAGES/THUMB/Image7.jpg" width="85" height="55" /></a>
<a href="IMAGES/LARGE/Image8.jpg"><img src="IMAGES/THUMB/Image8.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image9.jpg"><img src="IMAGES/THUMB/Image9.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image10.jpg"><img src="IMAGES/THUMB/Image10.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image11.jpg"><img src="IMAGES/THUMB/Image11.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image12.jpg"><img src="IMAGES/THUMB/Image12.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image13.jpg"><img src="IMAGES/THUMB/Image13.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image14.jpg"><img src="IMAGES/THUMB/Image14.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image15.jpg"><img src="IMAGES/THUMB/Image15.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image16.jpg"><img src="IMAGES/THUMB/Image16.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image17.jpg"><img src="IMAGES/THUMB/Image17.jpg" width="85" height="55" /></a>
        <a href="IMAGES/LARGE/Image18.jpg"><img src="IMAGES/THUMB/Image18.jpg" width="85" height="55" /></a>
</ul>
    <div class="navigation-controls">
<span class="picture-slides-previous-image"><a href="#"><-</a></span>
<span class="picture-slides-image-counter"></span>
<span class="picture-slides-next-image"><a href="#">-></a></span>
</div>       
<div class="picture-slides-fade-container">
<a class="picture-slides-image-link"><img class="picture-slides-image" src="IMAGES/LARGE/Image1.jpg" width="800" alt="This is picture 1" /></a>
</div>
</div>
</div>
      <div class="picture-slides-fade-container">
      <div class="picture-slides-next-image">
</div>
</div>
</table>
  </tr>
</table>
</table>
</body>
</html>