title: Nav bar won't center in Bootstrap 3
body: <p>I'm sorry for asking this question, but I've search through stack overflow for weeks and haven't been able to rectify my problem. My nav bar is left justified; I need it to center. I have tried applying margin: 0px auto; to every element within the hierarchy of the <code>&lt;nav&gt;</code> along with text-align: center; but nothing is centering it.</p>
  
  <p>It's a Bootstrap 3 framework. Here's the code and my external CSS in addition to the bootstrap.min.css file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar {
    margin-bottom: 0;
    border-radius: 0;
  }
  .row.content {
    height: 450px
  }
  .sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
  }
  footer {
    background-color: #555;
    color: white;
    padding: 15px;
    font-family: "IM Fell DW Pica", serif;
    font-size: 18px;
  }
  @media screen and (max-width: 767px) {
    .sidenav {
      height: auto;
      padding: 15px;
    }
    .row.content {
      height: auto;
    }
  }
  #banner-img {
    margin: 0px auto;
  }
  header {
    background-color: #394650;
    /* background color of header */
  }
  nav {
    font-family: "IM Fell DW Pica", serif;
    /* font style of nav bar */
    font-size: 23px;
    /* font size of nav bar */
  }
  #myNavBar ul li {
    text-align: center;
  }
  /* FOR SMALL SCREENS */
  
  @media screen and (max-width: 767px) {
    nav {
      font-size: 40px;
      /* changes font size on smaller screens */
    }
    /* sets dimensions for embedded video on small screens */
    #intro-video-div {
      height: auto;
      width: auto;
    }
    section h1 {
      font-size: 40px;
    }
    section p {
      font-size: 25px;
    }
  }
  /* FOR BIG SCREENS */
  
  @media screen and (min-width: 768px) {
    /* sets dimensions for embedded video on larger screens */
    #intro-video-div {
      width: 560px;
      height: 315px;
    }
    section h1 {
      font-size: 36px;
    }
    section p {
      font-size: 20px;
    }
    #content-ads-holding-div {
      height: 750px;
    }
    .img-responsive {
      margin: auto;
    }
  }
  section,
  h1,
  p {
    font-family: "IM Fell DW Pica", serif;
    text-align: center;
    position: static;
  }
  #intro-video-div {
    margin: 0px auto;
    position: static;
    text-align: center;
  }
  #intro-video {
    width: 100%;
    height: 100%;
  }
  #nav-div-center,
  #nav-ul {
    margin: 0px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container-fluid" id="navbar-container"&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;div id="nav-div-center"&gt;
          &lt;ul class="nav navbar-nav" id="nav-ul"&gt;
            &lt;li class="active" id="home"&gt;Home&lt;/li&gt;
            &lt;li id="episodes"&gt;Episodes&lt;/li&gt;
            &lt;li id="research"&gt;Research&lt;/li&gt;
            &lt;li id="store"&gt;Store&lt;/li&gt;
            &lt;li id="support"&gt;Support&lt;/li&gt;
            &lt;li id="communicate"&gt;Communicate&lt;/li&gt;
            &lt;li id="affiliations"&gt;Affiliations&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see the actual website at <a href="http://www.kspavia.com/bootstrap.php" rel="nofollow">http://www.kspavia.com/bootstrap.php</a></p>