CSSでのtable要素の余白

HPでのナビゲーションとして、画像を横に５つ並べて表示させたいと考え、tableを使って画像を
配置したのですが、table全体の外側の余白が残ってしまいます。

merginを使う方法（http://hmaster.net/ctable4.html）などを調べてやってみましたが、余白は消えません。

余白を消す方法について、どなたかご教授いただければ幸いです。

HTMLのコード

<div class="menu">
   <ul>
    <li class="menu-item"><img src="nav21.png" id="img2"></li>
    <li class="menu-item"><img src="nav22.png" id="img3"></li>
    <li class="menu-item"><img src="nav23.png" id="img4"></li>
    <li class="menu-item"><img src="nav24.png" id="img5"></li>
    <li class="menu-item"><img src="nav25.png" id="img6"></li>
   </ul>
  </div>

CSSのコード

.menu{
 margin-right: 10px;
 position: fixed;
 margin: 0px;
 list-style: none;
 background-color: #010101;
 filter:alpha(opacity=80);
 -moz-opacity: 0.8;
 opacity: 0.8;
 left: 0;
 right: 0px;
 z-index: 3;
 bottom: 0px;;
 overflow: hidden;
 display: table;
 text-align: center;
 vertical-align: middle;
 padding:0;
}

.menu-item{
 display: table-cell;
 vertical-align: bottom;
 border-left:1px solid #ffffff;
}

.menu-item li{
 float: left;
}