title: bootstrap navbar floating left and right
body: <p>Hi guys I'm using bootstrap 3 and trying to get my navbar to look something like this : 
  <a href="https://i.stack.imgur.com/qCpxt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCpxt.png" alt="enter image description here"></a></p>
  
  <p>The problem I'm facing is trying to get the logo to float to the left and then the icons to float to the right, i have done research and seen other stack questions on this but for the life of me i can't fix it at all and i have no idea why, </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-nav {
      padding-left: 15px;
      padding-right: 0;
  }
  .navbar-nav&gt;li&gt;a {
      line-height: 80px;
      padding: 0 15px !important;
  }
  .navbar-brand {
      color: #cccccc !important;
      font-size: 20px;
      line-height: 20px;
      font-weight: 500;
      height: auto;
      padding: 20px 15px;
  }
  .navbar-brand&gt;img {
      width: auto;
      max-height: 28px;
      margin-top: 5px;
  }
  .navbar-default {
      background-color: white;
      border: none !important;
      border-bottom: 1px solid #e8e9eb !important;
  }
  .secondary-nav a {
      color: #111111;
  }
  .secondary-nav a:hover {
      color: #c39d6d;
  }
  .secondary-nav a.shopping-cart {
      line-height: 14px;
      position: relative;
      width: 45px;
      height: 20px;
  }
  .secondary-nav a.shopping-cart i {
      margin-right: 15px;
  }
  .secondary-nav .cart-badge {
      position: absolute;
      top: -4px;
      right: 6px;
      color: white;
      background: #ad8b60;
      border-radius: 50px;
      font-size: 9px;
      font-weight: 400;
      line-height: 10px;
      padding: 2px 4px;
  }
  
  .space-right {
      padding-right: 15px !important;
  }
  
  .navbar-nav {
      float: right;
  }
  nav .secondary-nav {
      float: right;
      margin-top: 30px;
      margin-left: 30px;
      padding-right: 15px;
  }
  .nav-sec .navbar-nav {
      float: none;
  }
  .nav-sec .navbar-nav&gt;li {
      float: none;
      display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;nav class="navbar navbar-default nav-sec navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="index.html"&gt;&lt;img src="Images/logo.png" alt="logo"&gt;&lt;/a&gt;
              &lt;/div&gt;&lt;!-- / navbar-header --&gt;
              &lt;div class="secondary-nav"&gt;
                  &lt;a href="login-register.html" class="my-account space-right"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="shopping-cart.html" class="shopping-cart"&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt; &lt;span class="cart-badge"&gt;2&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse text-center collapse" aria-expanded="false" style="height: 1px;"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;&lt;span&gt;HOME&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;&lt;span&gt;ABOUT US&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;&lt;span&gt;PRODUCTS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;&lt;span&gt;INSPIRATION&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span&gt;CONTACT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!--/ nav-collapse --&gt;
          &lt;/div&gt;&lt;!-- / container --&gt;
   &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hopefully someone can save me :)</p>
  
  <p>Thanks again </p>