リストを横並びさせた時にできた左端の余白を消したい

質問

いつもお世話になっております。WEBサイト制作でご質問があります。
使用ソフトはDreamweaverCS5.5。個人的に公開するものなので、Chromeのみで確認しています。

リストを横並びにしてナビゲーションを作っているのですが、画像のように左端に余白ができてしまいナビゲーションが改行された状態になってしまいます。

【html】
<div id="hedder">
<ul class="navi">
<li class="top"><a href="#">top</a></li>
<li class="about"><a href="#">about</a></li>
<li class="profile"><a href="#">profile</a></li>
<li class="event"><a href="#">event</a></li>
<li class="link"><a href="#">link</a></li>
</ul><br clear="all" />
</div>

【CSS】
ul.navi {
list-style-type: none;
}
.navi li {
display: inline;
float: left;
}
.navi li a {
text-indent: -9999px;
display: block;
height: 78px;
}
.navi li.top a {
background-image: url(img/btn_top.gif);
width: 189px;
}
.navi li.about a {
background-image: url(img/btn_about.gif);
width: 190px;
}
.navi li.profile a {
background-image: url(img/btn_profile.gif);
width: 189px;
}
.navi li.event a {
background-image: url(img/btn_event.gif);
width: 189px;
}
.navi li.link a {
background-image: url(img/btn_link.gif);
width: 193px;
}

<div id="wrapper">で幅950pxの指定をしています。
よろしくお願いします。
（画像の青い四角は意図的にあとから加えた物なので本来のデザインではないものです。）

回答No.1

wiki-pedia · ベストアンサー

marginで詰めてみては如何でしょうか。

ul.navi {
list-style-type: none;
margin-left: -20px;
}

数字は適当です。

お礼

早急なご回答ありがとうございます！
おっしゃる通り、marginを-40px詰めたところ綺麗に横並びができました。
ありがとうございました！

回答No.2

cobaltlight

リストに標準で設定されているマージンが原因のようです。
liやulタグにmargin:0などと指定してマージンをなくしてみてください。

お礼

早急なご回答ありがとうございます。
なるほど、marginが原因なのですね…。試してみたいと思います。ありがとうございました！