divの中のulはみ出す

Question

3時間格闘した末に解決できなかったので　お願いします。
jqueryでタブメニューを作っています。
タブメニューは実際に動いてくれたもののデザインが
思うようにいかなくて困っています。

まずは本題 　ボタン編

div 要素の中に ul要素　をすっぽりと入れたい。
div・・・ 高さ　70 横　　200
ul・・・ 高さ 70 横 200

<!-- タブメニューのトリガー　　-->
<div class="button">
    <ul>                
        <!-- leftをタッチするとLEFTTABが出ます -->
        <li id="left" class="selected">left</li>
        <!-- rightをタッチするとRIGHTTABが出ます  -->
        <li id="right">right</li>
    </ul>
</div>

body{
    margin: 0;
}

.button{
    width: 200px;
    height: 70px;
}

.button ul{
    width: 200px;
    height:70px;
}

.button ul li{
     list-style: none;
     display: inline-block;
}

実行結果
こちらはulをつつむdiv要素

↓こちらはdivの中に入れたいul

見にくいですがul要素がdiv(class="button")から40pxほどはみ出しているのが分かります。
この謎の隙間の原因はなんでしょうか？
この隙間をなくしてdiv要素の中にul要素を全く同じ大きさでかぶせたいのです。
参考になるリンクまたは説明をお願いします。

回答による解決方法

ul{
 padding: 0;
}

Answer 1

.button ulに

margin:0px;
padding:0px;

を追加すればきっちり収まります

Comments

[kazuyakazuya]

ありがとうございます

Answer 2

2枚目の画像で、<div class="button">を選択していますが、<ul>を選択してみてください。
多分何かが左側に空白を作っています。

CSSでその空白を0pxにしてあげてくださーい。

Comments

[kazuyakazuya]

ありがとうございます

Answer 3

devツールを拝見するにulにpaddingが付いてるので、これが原因かと思います。
ulはデフォルトだとpadding-left:40pxが付与されるのでそれをリセットcssなどで打ち消すと良いです。

Comments

[kazuyakazuya]

ありがとうございます。できました