Boostrap Navbar with logo - Logo does not appear in the same row as links

Question

I can't figure out how to put a brand logo into my bootstrap navbar. I want the logo to appear on the left side of the navbar and the links should be in the center.

https://jsfiddle.net/spon1r82/2/

In the jsfiddle example you can see, that the links are centered and the brand logo is in fact on the right site, but the logo and the links appear to be in two different rows. How do i move the logo in the same row as the links and still keep the same division (logo (left), links (centered))?

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand Logo</a>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Stories</a></li>
                <li><a href="#">Videos</a></li>
                <li><a href="#">Photos</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS

/*NAVBAR*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}

Answer 1

Remove the width on .navbar-nav to get it working. See the example below.

EDIT I didn't see the comment by zgood, he has also the answer.

/*NAVBAR*/
.navbar-nav {
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand Logo</a>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Stories</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Photos</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Answer 2

You could absolutely position it like this:

.navbar-brand{
  position:absolute;
}

See this update fiddle.