私のウェブページ上で私の「ナビ」がなぜ広いのですか？ここ

Question

はページ

のスクリーンショットであると私はわずか5％の幅にそれを設定したとき、私のNAVはとても気広いですなぜ私は、私の人生のために、把握することはできませんか？

HTML

<div class="container"> 
     <header>Browyer Realty</header> 

     <nav> 
      <ul> 
       <li>Home Page</li> 
       <li>Residential</li> 
       <li>Business</li> 
       <li>Properties</li> 
       <li>Rentals</li> 
       <li>Appraisals</li> 
       <li>Contact Us</li> 
      </ul> 
     </nav> 

     <article> 
      <h2>Listing 2048</h2> 
      <p> 
       Paragraph 1 
      </p> 
      <p> 
       Paragraph 2 
      </p> 
      <p> 
       Paragraph 3 
      </p> 
     </article> 

     <section> 
      <img alt="img" src="img01.jpg"> 
     </section> 
     <section> 
      <img alt="img2" src="img02.jpg"> 
     </section> 

     <footer></footer> 
    </div> 
</body> 

CSS

div.container { 
    width: 100%; 
} 

header,footer { 
    padding: 1em; 
    background-color: blanchedalmond; 
    clear: left; 
} 

footer { 
    text-align: center; 
} 

nav { 
    float: left; 
    width: 5%; 
    margin: 0px; 
    padding: 1em; 
    border-top: 1px solid blue; 
} 

nav ul { 
    list-style-type: none; 
    padding: 20%; 
} 

nav ul a { 
    text-decoration: none; 
} 

article { 
    float: left; 
    margin-left: 25%; 
    width: 30%; 
    border-top: 1px solid blue; 
    border-left: 1px solid blue; 
    padding: 1em; 
    overflow: hidden; 
} 

section { 
    margin-left: 50%; 
    top: 0; 
} 

あなたがコードから見ることができるように、私が設定した 'NAV' 幅わずか5％には、しかし、あなたははっきりと見ることができます私のページのスクリーンショットでは、その幅は35％に似ています。私は何が原因で起こっているのか分かりません。何か助けていただければ幸いです。

Answer 1

すでに5％幅です。オーバーフロープロパティを適用すると表示されます。

overflow-x: auto; 

Answer 2

NAVの幅が5％であるあなただけが境界線を与えることによって、それを確認することができます：

1px solid blue 

をしかし、テキストはそれから来て、なぜあなたが求めているならば、それがあるためでありますnav ulで適用された詰め物のサイズ& cssで0にするとテキストが入ります5％幅のみ