Question: I need that the menu fills-in the width of its container instead of be left-aligned.

```
[LOGO A|B|C            ]
[LOGO   A  |  B  |  C  ]

```

Here is my test code. My question is how to achieve it using bootstrap.

```css
.navbar-brand{width: 405px;}
```

```html
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
```

Answer: 
You can use `flex-box`

```css
.navbar-brand {
  width: 405px;
}

@media screen and (min-width:768px) {
  .navbar>.container-fluid {
    display: flex;
  }
  ul.nav.navbar-nav {
    flex: 1 1;
    display: flex;
  }
  .navbar-nav>li {
    flex: 1 1;
  }
}
```

```html
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
```
Do you need something like this?

```css
.navbar-nav {
  display: flex;
    width: 100%;
    justify-content: space-between;
}

```

```html
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">

    <ul class="nav navbar-nav table-responsive">
    <li class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a>
    </li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
```