navbarの幅を100％にして、1つの行にnav項目を合わせようとしています

Question

なんらかの理由で私のnavbarが100％幅になっていません。私は.main-headerを100％の幅にしようとしましたが、何が問題なのかまだ分かりません。 navbarを100％にする理由は、すべてのnav項目が1行に収まるためです。私が間違っていることは何ですか？ここで

は、ナビゲーションバーがマシン上でどのように見えるかです http://imgur.com/a/za9LH

HTML

**Css** 
 

 
/* Navigation */ 
 
.main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    background-color: purple; 
 
    width: 100%; 
 
} 
 
.logo-name { 
 
    margin-left: 1%; 
 
    background-color: red; 
 
}  
 
.main-nav { 
 
    display: flex; 
 
    background-color: yellow; 
 
} 
 

 
.main-nav li { 
 
    padding: 0.3em; 
 
    align-items: flex-end; 
 
    background-color: transparent; 
 
    font-size: 17px; 
 
}

<header class="main-header"> 
 
<!--<h1 class="logo-name"><li><a href="index.html">R.J Roofer</a></li></h1>--> \t \t 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <nav class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
<!--<li><a href="#">FREE QUOTE</a></li>--> \t \t \t \t 
 
    </nav> 
 
</header>

Answer 1

8pxマージンを取るあなたのナビゲーションバーがfullwifthない理由、thatsの。 bodyタグにmargin:0を追加してください。ここcodepenは次のとおりです。https://codepen.io/bhuwanb9/pen/XgmegE

body{ 
    margin:0; 
} 

Answer 2

おそらくあなたが必要とするすべては、HTMLや身体へのためのパディングとマージンがあります0に設定してください。 thisまたはthisのような汎用リセットを使用することを検討してください。デフォルトbodyことで

/* Navigation */ 
 
html, body { 
 
padding: 0; 
 
margin: 0; 
 
} 
 
.main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    background-color: purple; 
 
    width: 100vw; 
 
} 
 

 
.logo-name { 
 
    margin-left: 1%; 
 
    background-color: red; 
 
} 
 

 
.main-nav { 
 
    display: flex; 
 
    background-color: yellow; 
 
} 
 

 
.main-nav li { 
 
    padding: 0.3em; 
 
    align-items: flex-end; 
 
    background-color: transparent; 
 
    font-size: 17px; 
 
}

<header class="main-header"> 
 
    <!--  <h1 class="logo-name"><li><a href="index.html">R.J Roofer</a></li></h1> 
 
     --> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <nav class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <!--     <li><a href="#">FREE QUOTE</a></li> 
 
--> 
 
    </nav> 
 
</header>

Answer 3

問題は、コンテナが全幅ではなかったということでした。リスト項目も小さかった。ここにペンがあります：https://codepen.io/praedictus/pen/zzvpez

/* Navigation */ 

.main-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background-color: purple; 
    width: 100%; 
} 
.logo-name { 
    margin-left: 1%; 
    background-color: red; 
}  
.main-nav { 
    display: flex; 
    background-color: yellow; 
    width: 100%; 
} 

.main-nav li { 
    padding: 0.3em; 
    align-items: flex-end; 
    background-color: transparent; 
    font-size: 17px; 
    display: block; 
    float: left; 
    width: 20%; 
    text-align: center; 
}