Center Navbar links without brand pushing it to the right in Bootstrap 4?

I am trying to center my navbar links but when i do my brand logo pushes it to the right so it is not centered. Heres my html ...

<nav class="navbar navbar-toggleable-md navbar-light main-nav">
  <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="index.html">Brand Name</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto clearfix">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">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" href="#">Link</a>
      </li>
    </ul>

  </div>
</nav>

How can i stop the brand logo from affecting the position of my navbar links.

Solution

This happens because of the way adjacent flexbox items position relative to each other.

One option is to use the flexbox utils, and a full width placeholder element on right. The navbar-brand is also set to full-width using w-100 util class.

<nav class="navbar navbar-toggleable navbar-inverse bg-primary justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCenter">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href class="navbar-brand d-flex w-100 mr-0">Brand is Wider Name</a>
    <div class="navbar-collapse collapse" id="navbarCenter">
        <ul class="navbar-nav mx-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Center</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100"> </div>
</nav>

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

Another option is to absolute position the .navbar-nav..

@media (min-width: 567px) {
    .abs-center-x {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }
}

https://www.codeply.com/go/RCBftzZCD8