How to center a fixed top Navbar in bootstrap 4

Question

I am trying to center a fixed top navbar in Bootstrap 4 apla 6 but it is not centering it, but instead fills the top in full. How can I make it centered while fixed at the top. I have placed the nav bar in a container as mentioned on the website but it is not centering.

Please see images below

Centered but not fixed at top

fixed at top, but filling the width even though it is in a container

<div class="container">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse ">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
   </div>

It seems if you wrap it in a div with container class it does not work but if you use the container class in the nav bar it works

Answer 1

Edit: I see that the original answer here is the right one for the asked question - which works for when you want your navbar background to be 'contained/centered' too. However, if you want your navbar background to take full width, my way is the way to go.

---

Adding .container to the <nav> element will create a new problem: the <nav> background will stop occupying full width. Which is usually not the desired behavior.

To get around this, simply nest all the contents of the element in a .container .As follows:

  <nav class="navbar navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbar1">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Answer 2

Make the navbar a container too...

http://www.codeply.com/go/sJbrJciQia

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>