title: Make Bootstrap columns appear in one row
body: <p>I have used Bootstrap before, but I'm having an issue with columns. I cannot find an answer on stackoverflow.</p>
  
  <p>My columns are appearing in two rows instead of one.</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/n0syj75t/" rel="nofollow">http://jsfiddle.net/n0syj75t/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="header row"&gt;
      &lt;div class="col-sm-1"&gt;&lt;/div&gt;
      &lt;div class="col-sm-3 logo"&gt;
          &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/output/abstract-q-c-300-63-7.jpg"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-8 header-menu"&gt;
          &lt;div class="menu-menu-1-container"&gt;
              &lt;ul id="menu-menu-1" class="menu"&gt;
                  &lt;li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"&gt;&lt;a href="#"&gt;How We Work&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- end header row --&gt;
  &lt;/div&gt;&lt;!-- end container-fluid --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header {
      background-color: #f9f9f9;
      height: 110px;
  }
  
  .header ul {
      padding: 0px;
      margin: 0px;
      list-style-type: none;
      font-size: 0;
  }
  
  .header li, .header-menu a {
      display: inline-block;
      height: 100%;
  }
  
  .header-menu a {
      font-size: 14px;
      font-family: Open Sans;
      text-transform: uppercase;
      padding: 45px;
      color: #7f7f7f;
  }
  
  /* Bootstrap rows and columns --------------------------------------- */
  
  .row {
      margin-right: -15px;
      margin-left: -15px;
  }
  
  .col-sm-1 { 
      width: 8.33333333%; 
  }
  
  .col-sm-3 {
      width: 25%;
  }
  
  .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { 
       float: left;
  }
  
  .col-sm-8 {
      width: 66.66666667%;
  }
  
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
  }
  </code></pre>