CSSでのtable要素の余白


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

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

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

HTMLのコード

[code]

    <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>
    
[/code]

CSSのコード

[code]

    .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;
    }
    
[/code]




`ul` に対してマージン・パディングを０にしてみてはどうでしょうか？

例：

[code]

    .menu ul{
        margin:0;
        padding:0;
    }
    
[/code]




`ul` に対してマージン・パディングを０にしてみてはどうでしょうか？

例：

[code]

    .menu ul{
        margin:0;
        padding:0;
    }
    
[/code]

