CSS対応メニューの幅

Question

私はシンプルなウェブサイトを作っていて、1つのことに苦労しています...

まさにメニューナビです。 私はそれをしましたが、それは左隅に位置しているだけです。私がしたいのは、画面の最後までカラーストリップ（＃333）を続けることです。ここ はコードです：私はまだCSS、HTMLとJSを学んでいますし、これが私の最初の試みである...いくつかのコード

#primary_nav_wrap { 
 
    margin: 0; 
 
    float: left; 
 
} 
 

 
#primary_nav_wrap ul { 
 
    background-color: #333; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#rectangle { 
 
    float: right; 
 
    position: relative; 
 
    width: 1200px; 
 
    overflow: hidden; 
 
    background: #333; 
 
} 
 

 
#primary_nav_wrap ul a { 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 500; 
 
    line-height: 50px; 
 
    padding: 0 20px; 
 
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 

 
#primary_nav_wrap ul li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item { 
 
    background: #4CAF50 
 
} 
 

 
#primary_nav_wrap ul li:hover { 
 
    background: #282828 
 
} 
 

 
#primary_nav_wrap ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #333; 
 
    padding: 0 
 
} 
 

 
#primary_nav_wrap ul ul li { 
 
    float: none; 
 
    width: 200px 
 
} 
 

 
#primary_nav_wrap ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 

 
#primary_nav_wrap ul li:hover>ul { 
 
    display: block 
 
}

<nav id="primary_nav_wrap"> 
 
    <ul> 
 

 
    <li class="current-menu-item"><a href="#">Home</a></li> 
 
    <li><a href="#">Portfolio</a> 
 
     <ul> 
 
     <li><a href="#">About me</a></li> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">MenuMenu</a></li> 
 
     <li><a href="#">MenuMenuMenu</a></li> 
 
     </ul> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
     <ul> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">Menu</a></li> 
 
      <li><a href="#">WutWut</a></li> 
 

 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 

 
    </ul> 
 
    <!-- 
 
    <div id="rectangle"></div> 
 
    --> 
 
</nav>

、私の一部ではありませんが、ちょっと..私 闘争は、メニューの背景色（＃333）を右側の端まで続けることです。あなたは私がOFC、（そのために私を殺すしないでください）長方形を使用していることをやろうとした、適切に働いていなかった... ヘルプ:(

Answer 1

#primary_nav_wrap { 
width: 100%; 
background:#333; 
} 

を見ることができるようにするだけの100％を与えます幅や色背景

Answer 2

は単に#primary_nav_wrapと#primary_nav_wrap ulに100％と幅を設定する。

#primary_nav_wrap { 
 
    margin: 0; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
#primary_nav_wrap ul { 
 
    background-color: #333; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#rectangle { 
 
    float: right; 
 
    position: relative; 
 
    width: 1200px; 
 
    overflow: hidden; 
 
    background: #333; 
 
} 
 

 
#primary_nav_wrap ul a { 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 500; 
 
    line-height: 50px; 
 
    padding: 0 20px; 
 
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 

 
#primary_nav_wrap ul li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item { 
 
    background: #4CAF50 
 
} 
 

 
#primary_nav_wrap ul li:hover { 
 
    background: #282828 
 
} 
 

 
#primary_nav_wrap ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #333; 
 
    padding: 0 
 
} 
 

 
#primary_nav_wrap ul ul li { 
 
    float: none; 
 
    width: 200px 
 
} 
 

 
#primary_nav_wrap ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 

 
#primary_nav_wrap ul li:hover>ul { 
 
    display: block 
 
}

<nav id="primary_nav_wrap"> 
 
    <ul> 
 

 
    <li class="current-menu-item"><a href="#">Home</a></li> 
 
    <li><a href="#">Portfolio</a> 
 
     <ul> 
 
     <li><a href="#">About me</a></li> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">MenuMenu</a></li> 
 
     <li><a href="#">MenuMenuMenu</a></li> 
 
     </ul> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
     <ul> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">Menu</a></li> 
 
      <li><a href="#">WutWut</a></li> 
 

 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 

 
    </ul> 
 
    <!-- 
 
    <div id="rectangle"></div> 
 
    --> 
 
</nav>