html - サイド ナビゲーション バーの問題

Question

私はこれでばかげたエラーを犯したと確信していますが、うまくいくようには見えません。ナビのリスト項目が div の端から始まっていません。左側に余白があるようです。

HTML

<div class="container">
<div id="topline"> blah blah </div>
    <div class="leftbox">
    <img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" /> 
    </div>
    <div id="banner">
    <img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" /> 
    </div>
    <div id="navmenu">
    <ul>
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">STORE</a></li>
    <li><a href="#">SALE ITEMS</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </div>
    <div id="mainContent"> FEATURED ITEMS</div>

</div>

CSS

html, body {    
        margin:0;
        padding:0;
        font-family: Calibri, Arial, sans-serif;
}

@font-face {
font-family:'Neon 80s';
src:url('../fonts/neon.ttf'),
    url('../fonts/neon.eot');
    }

.container {
        clear: both;
        margin: 0 auto;
        padding: 0;
        width: 58%;
        background-color: #FFFFFF;}

#topline {  float:left;
        text-align:right;
        padding: 0;
        width: 100%;
        height: 5%;
        background-color: #FFF;
        margin-top:2%;
        margin-bottom:2%;}

.leftbox {
        float:left;
        padding: 0;
        width: 30%;
        background-color: #5D2F92;}
.leftbox img {width: 96%;
margin-left: 3%
margin-right:1%;}

#banner img {width: 100%;}


#banner {float:left;
     width:68%;
     margin-left:2%;}

#navmenu {
        float:left;
        padding: 0;
        width: 30%;
        background-color: #5D2F92;
        height: 100%;
        margin-top:0.5%;
        font-family:'Neon 80s';
        font-size:18pt;
        text-align:left;
        }

#navmenu li {
        list-style:none;
        margin: 0;
        }

#navmenu li a {text-decoration:none;
        color:#FFFFFF;
        margin: 0;
        display:block;
        padding:20px 0px;}  
#navmenu li.active a {background-color:#C49A6C;}        

#mainContent {float:left;
          width:68%;
          background-color:red;
          text-align:center;
          margin-top:0.5%;
           margin-left:2%;}

Answer 1

ulブラウザのデフォルト CSS 値をリセットするのを忘れました。

デフォルトでは、ブラウザーによっては、いくつかの属性値がいくつかの要素に割り当てられています (マージンとパディングulがある場合) 。したがって、これを修正するには、次のようにこれらの値をリセットする必要があります。

http://jsfiddle.net/gespinha/dW9wB/1/

  #navmenu ul{
       margin:0;
       padding:0;
    }