Centering navbar not working - html

Question

I'm very new to HTML and CSS. I'm trying to center the navbar at the top of a site. Here is my 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>
And here is (some) 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;
}
I must apologise in advance if this question looks like a duplicate of other questions. I have tried out different permutations of how the CSS code should be set according to other answered questions, but to be honest how and which class in the CSS code takes precedence is still not clear to me and my navbar is just not centering. I took the code from a bootstrap site, and am simply reverse engineering. It could be that what is already written contains some redundant code (for example, there may be too many divs) and so may need to be cleared up.

Answer 1

change :
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
To :
<div class="container">
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
Demo
Note : For See Result increment Result Page.