は、ナビゲーションバー上の空白を削除する方法

Question

は、ここに私がいる問題のスクリーンショットですnavbar。私はマージンとパディングを0にしようとしましたが、動作していません。どんな助けもありがとう。ここで

はhtmlです：

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background-image: url("images/bg.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
    font-family: Times New Roman; 
 
} 
 

 
header { 
 
    clear: both; 
 
    text-align: center; 
 
} 
 

 
#header img { 
 
    height: 40%; 
 
    width: 40%; 
 
} 
 

 
#wrap { 
 
    width: 1000px; 
 
    margin: auto; 
 
    padding: auto; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
} 
 

 
nav ul { 
 
    margin: auto; 
 
    padding: auto; 
 
    list-style-type: none; 
 
    background-color: #009BB2; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    padding-left: 10px; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    font-family: Times New Roman; 
 
    font-size: 25px; 
 
    color: maroon; 
 
} 
 

 
nav a:hover { 
 
    color: blue; 
 
} 
 

 
img.size { 
 
    height: 15%; 
 
    width: 15%; 
 
    padding: 5px; 
 
} 
 

 
section h1 { 
 
    text-align: center; 
 
} 
 

 
figure { 
 
    float: right; 
 
    overflow: hidden; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div id="wrap"> 
 
    <header> 
 
    <div id="header"> 
 
     <img src="logo.png" alt="The Seasons" /> 
 
    </div> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="">Fall</a></li> 
 
     <li><a href="">Spring</a></li> 
 
     <li><a href="">Summer</a></li> 
 
     <li><a href="">Winter</a></li> 
 
     <li><a href="">Home</a></li> 
 
     </ul> 
 

 
    </nav> 
 
    </header> 
 

 
    <section> 
 
    <h1>The Four Seasons of the Earth</h1> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/fall_front.png" alt="Fall" /> 
 
    </figure> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/winter_front.png" alt="Winter" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/spring_front.png" alt="Spring" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/summer_front.png" alt="Summer" /> 
 
    </figure> 
 

 

 
    </section> 
 

 

 

 
</div>

Answer 1

は、あなたのnav ulセレクタにdisplay: inline-block;を追加し、それを側面から空白を削除します。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background-image: url("images/bg.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
    font-family: Times New Roman; 
 
} 
 

 
header { 
 
    clear: both; 
 
    text-align: center; 
 
} 
 

 
#header img { 
 
    height: 40%; 
 
    width: 40%; 
 
} 
 

 
#wrap { 
 
    width: 1000px; 
 
    margin: auto; 
 
    padding: auto; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
} 
 

 
nav ul { 
 
    margin: auto; 
 
    padding: auto; 
 
    list-style-type: none; 
 
    background-color: #009BB2; 
 
    display: inline-block; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    padding-left: 10px; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    font-family: Times New Roman; 
 
    font-size: 25px; 
 
    color: maroon; 
 
} 
 

 
nav a:hover { 
 
    color: blue; 
 
} 
 

 
img.size { 
 
    height: 15%; 
 
    width: 15%; 
 
    padding: 5px; 
 
} 
 

 
section h1 { 
 
    text-align: center; 
 
} 
 

 
figure { 
 
    float: right; 
 
    overflow: hidden; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div id="wrap"> 
 
    <header> 
 
    <div id="header"> 
 
     <img src="logo.png" alt="The Seasons" /> 
 
    </div> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="">Fall</a></li> 
 
     <li><a href="">Spring</a></li> 
 
     <li><a href="">Summer</a></li> 
 
     <li><a href="">Winter</a></li> 
 
     <li><a href="">Home</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 

 
    <section> 
 
    <h1>The Four Seasons of the Earth</h1> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/fall_front.png" alt="Fall" /> 
 
    </figure> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/winter_front.png" alt="Winter" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/spring_front.png" alt="Spring" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/summer_front.png" alt="Summer" /> 
 
    </figure> 
 
    </section> 
 
</div>

Answer 2

あなたは1000pxの幅を限界いっぱいまでしている：

#wrap{ 
    width:1000px; 
} 

NAVはその範囲内にあるので、それよりも広いを伸ばすことができません。

Answer 3

他の人に注目されているように、幅を1000pxに設定しています。あなたはどちらの側の空緑の色を削除したい#wrap{width: 100%}