title: align logo, nav and social icons on one line
body: <p>I am trying to align the logo, nav links, and social icons on one line. I am using bootstrap, and custom css styling on my page.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header id="header-main"&gt;
    &lt;div id="site-header"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;div id="site-logo"&gt;
              &lt;a href="www.google.com"&gt;&lt;img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" /&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="social-set"&gt;
              &lt;a href="https://www.facebook.com" target="_blank"&gt;
                &lt;li class="fa fa-facebook"&gt;&lt;/li&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;!-- end social-set --&gt;
            &lt;nav id="nav"&gt;
              &lt;div class="menu-main-container"&gt;
                &lt;ul id="menu-main" class="menu"&gt;
                  &lt;li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"&gt;&lt;a href="http://www.website.com/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
          &lt;!-- .col-sm-12 --&gt;
        &lt;/div&gt;
        &lt;!-- .row --&gt;
      &lt;/div&gt;
      &lt;!-- .container --&gt;
    &lt;/div&gt;
    &lt;!-- .site-header --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header-main {
    width: 100%;
    margin: 0 0 9px 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
  
  #site-header {
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    position: relative;
  }
  
  #site-logo {
    margin: 0;
    padding: 0;
    line-height: 1em;
    position: relative;
    font-weight: 900;
    font-size: 2em;
    z-index: 999;
    display: inline-block;
  }
  
  .social-set ul {
    margin: 6px 0 0 !important;
    padding: 0;
    display: inline;
  }
  
  .social-set ul li {
    padding: 0 2px 5px 0;
    margin: 0;
    display: inline-block;
    border: none !important;
    clear: none;
    line-height: 100%;
  }
  
  .social-set li img {
    vertical-align: middle;
    margin-top: -3px;
  }
  
  #nav {
    max-height: 100px;
    overflow: hidden;
  }
  
  #nav ul {
    margin: 0 0 30px 0;
    text-align: center;
  }
  
  #nav ul {
    margin: 0 0 30px 0;
    text-align: center;
  }
  
  #nav li {
    padding: 0 16px;
    font: 400 18px/13px 'Open Sans', sans-serif;
    display: inline-block;
    text-transform: uppercase;
  }
  
  .social-set {
    float: right;
    margin-bottom: 10px;
  }
  </code></pre>
  
  <p>I can use <code>position: absolute</code> to set the logo at a fixed position and on one line but I would like to use <code>position relative</code> and have it adjust itself on one line depending on the number of links in navigation and social icons.</p>
  
  <p><strong><a href="https://jsfiddle.net/xs364op0/3/" rel="nofollow">JSFiddle demo</a></strong></p>