Q:

twitter bootstrap columns not clearing

I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="header">
        <div class="col-xs-6 col-sm-4">
          <a href="{{ URL::route('home') }}">
            <div class="header_group">
              <img src="../../images/logo.png">
            </div><!--header group -->
          </a>                  
        </div>
        <div class="col-xs-6 col-sm-3"></div>
          <div class="col-xs-6 col-sm-4">
            <p> </p>
          </div>
          <div class="col-xs-6 col-sm-4">
            @include('layout.navigation')
          </div>
        </div><!-- main header -->
      </div><!-- row -->                   
   </div>
</div>

External CSS sheet
.header {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: red;
}

.header_group {
    background-color: none;
    width: 100%;
    height: auto;
    display: inline-table;
    font-size: 1.5em;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: #f0fff0;
    clear: none;
    margin-top: 5%;
}

.header_text {
    vertical-align: middle;
    display: inline;
    text-align: center;
    color: #f05152;
}

.nav {
     width: auto;
     height: auto;
    margin-top: 12%;
}

.nav a {
    color: #000;
    padding-left: 10%;
    margin-left: 4%;
}

.navbar {
    width: 100%;
    height: 20%;
    padding-top: 0;
}

.wrapper {
    width: 100%;
    height: 500px;
    background: url(../../../images/yellow.png) repeat,         
}

A:

Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.

