Wie kann ich erreichen, dass meine Navigationsleiste die gesamte Breite der Seite einnimmt?

Question

Wenn ich nach unten scrolle, sind meine Schaltflächen fest (groß), aber die Navigationsleiste erstreckt sich nicht über die ganze Seite (die Navigationsleiste sollte weiß sein). Wie behebe ich das?

Wie bekomme ich auch meine "aktive" Leiste beim Scrollen über inaktiv (das Gegenteil der anderen Tasten)?

Ich benutze Bootstrap und ich bin ein neuer Programmierer, also bitte 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>

Vielen Dank!

Answer 1

versuchen diese und geben Feedback

#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>