Bootstrap 3: Navbar not full width

I'm currently trying to create a Navbar with 100% width in Bootstrap, but it isn't working like it should. How can I scale the Navbar to 100% width?

<div class="container-fluid" style="border: 1px solid">  
      <!-- Navbar -->
      <div class="row">
          <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Bootflat</a>
                </div>
              </div>
            </nav>
          </div>
        </div>
    </div>

Picture: http://i.imgur.com/diqTvTP.png

Answers:

I think this code looks fine as per your requirements. 

<div style="border: 1px solid">  
  <nav class="navbar navbar-default" role="navigation">
    <div>
      <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Bootflat</a>
      </div>
    </div>
  </nav>
</div>

Please see here

TAGS