html - 居中导航栏不起作用

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 代码的不同排列，但老实说，我和我的 navbar 仍然不清楚 CSS 代码中的优先级和优先级只是不居中。我从 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

注意:对于查看结果增量结果页。