居中导航栏不起作用

Question

我对@9​​87654321@ 和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 只是没有居中。我从引导站点获取代码，只是进行逆向工程。可能是已经写的内容包含一些冗余代码（例如，可能有太多的 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

注意：参见结果增量结果页面。