Zentrieren navbar funktioniert nicht

Question

Ich bin sehr neu zu HTML und CSS. Ich versuche, die navbar an der Spitze einer Website zu zentrieren. Hier ist mein HTML Code:

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

Und hier ist (etwas) relevant CSS Code:

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

Ich muss im Voraus entschuldigen, wenn diese Frage wie ein Duplikat anderen Fragen aussieht. Ich habe verschiedene Permutationen ausprobiert, wie der CSS-Code nach anderen beantworteten Fragen gesetzt werden sollte, aber um ehrlich zu sein, wie und welche Klasse im CSS-Code Vorrang hat, ist mir immer noch nicht klar und meine navbar ist einfach nicht zentriert. Ich habe den Code von einer Bootstrap-Site genommen und bin einfach Reverse Engineering. Es könnte sein, dass das, was bereits geschrieben wurde, einen redundanten Code enthält (zum Beispiel kann es zu viele divs geben) und muss daher möglicherweise aufgeklärt werden.

Answer 1

Änderung:

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

An:

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

Demo

Hinweis: Siehe Ergebnis Schritt Ergebnisseite.