ナビゲーションバーをページの全幅に広げるにはどうすればよいですか？

Question

私が下にスクロールすると、ボタンは固定されています（偉大です）が、ナビゲーションバーはページ全体に広がっていません（ナビゲーションバーは白でなければなりません）。これをどうやって解決するのですか？

はまた、どのように私は私の「アクティブ」バーが（他のボタンの反対側）の上にスクロールすると非アクティブになることを得るのですか？

私は、ブートストラップを使用していると私はしてくださいELI5ので、新しいプログラマです。

#header { 
 
    padding: 10px; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right { 
 
    padding: 20px; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right a { 
 
    color: black; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right > .active > a { 
 
    color: white; 
 
    background-color: #E74C3C; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right > li> a:hover { 
 
    color: white; 
 
    background-color: #E74C3C; 
 
}

<header id="header"> 
 
    <div class="navbar"> 
 
    <div class="navbar-fixed-top"> 
 
     <div class="container" style="width: auto;"> 
 
     <div class="nav-collapse" id="nav-collapse"> 
 
      <ul class="nav navbar-nav navbar-right" id="nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#">Portfolio</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</header>

どうもありがとう！

Answer 1

あなたのフィードバック、このいずれかを試して、与える

#header { 
 
    padding: 10px; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right { 
 
    padding: 20px; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right a { 
 
    color: black; 
 
} 
 
.navbar #nav.navbar-nav.navbar-right > .active > a { 
 
    
 
    color: white; 
 
    background-color: #E74C3C; 
 
    
 
} 
 
.navbar #nav.navbar-nav.navbar-right > li> a:hover { 
 
    color: white; 
 
    background-color: #E74C3C; 
 
} 
 

 
    
 

 
.navbar #nav.navbar-nav.navbar-right > li{ 
 
    float:left; 
 
    margin-right:80px; 
 
    list-style:none; 
 
    }

<header id="header"> 
 
    <div class="navbar"> 
 
    <div class="navbar-fixed-top"> 
 
     <div class="container" style="width: auto;"> 
 
     <div class="nav-collapse" id="nav-collapse"> 
 
      <ul class="nav navbar-nav navbar-right" id="nav"> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#">Portfolio</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</header>