居中導航欄不工作

Question

我很新HTML和CSS。我試圖將navbar放在網站的頂部。這裏是我的HTML代碼：

<!-- Navigation --> 
<div class="nav_container"> 
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation"> 
     <div class="container">   
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav page-scroll" style="text-align:center"> 
        <li> 
         <a class="page-scroll" href="#page-top">Start</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#packages">Packages</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#about">About</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#showcase">Showcase</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#portfolio">Portfolio</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

這裏是（一些）相關CSS代碼：

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
} 
@media (min-width: 768px) { 
    .navbar { 
    border-radius: 4px; 
    } 
} 
.nav_container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    position: relative; 
    opacity: 1; 
    text-align: center; 
} 
.nav_container nav { 
    display: inline-block; 
    text-align: center; 
} 
.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

我必須提前，如果這個問題看起來像其他問題重複道歉。我已經根據其他回答的問題嘗試瞭如何設置CSS代碼的不同排列方式，但說實話，CSS代碼中的優先級如何以及哪個類仍然不清楚，我的navbar只是不集中。我從bootstrap網站獲取代碼，並且只是進行反向工程。可能是因爲已寫入的內容包含一些冗餘代碼（例如，可能有太多的div），因此可能需要清理。

Answer 1

變化：

<div class="nav_container"> 
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation"> 
     <div class="container"> 

要：

<div class="container"> 
    <div class="nav_container"> 
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation"> 

Demo

注：見結果增量結果頁。