如何让我的导航栏跨越页面的整个宽度？

Question

当我向下滚动时，我的按钮是固定的（很棒），但导航栏不会跨越整个页面（导航栏应该是白色的）。我该如何解决这个问题？

另外，我如何让我的＆＃34;活跃＆＃34;滚动时，栏会变为非活动状态（与其他按钮相反）？

我使用bootstrap并且我是一名新程序员，所以请ELI5。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

非常感谢！

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>