title: Header with Left, Right and Centered elements
body: <p>I am having trouble creating a header with left, right and centered elements - I keep trying but i am unable to get the elements positioned in that specific layout with the title being centered at all times</p>
  
  <p>Can anybody help? I feel that I am close but i can't get it to work!</p>
  
  <p><strong>CODE HERE: <a href="https://jsfiddle.net/4a25nqb4/" rel="nofollow">https://jsfiddle.net/4a25nqb4/</a></strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="top"&gt;
                 &lt;div id="social"&gt;
                      &lt;span class="fa fa-facebook"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-instagram"&gt;&lt;/span&gt;
                      &lt;span class="fa fa-youtube"&gt;&lt;/span&gt;
                 &lt;/div&gt;
                  &lt;p id="website"&gt;www.AlmostFreeFurniture.com&lt;/p&gt;
  
                  &lt;h1 id="title"&gt;Almost Free Furniture&lt;/h1&gt;
  
  
              &lt;/div&gt;
  
  
  
          &lt;/div&gt;    
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>* {
      margin:0 auto;
      padding:0px;
  }
  
  .top {
      height: 40px;
      background-color:black;
      color:red;
      margin-top:4px solid orange;
      margin-top:10px;
      display: table;
      width: 100%;
      text-align:center;
  }
  
  #social, #website, #title {
      display:inline-block;
      vertical-align: top;
  }
  
  #social {
      float:right;
  }
  
  #website {
      float:left;
  }
  
  #title {
      text-align: center;
  }
  </code></pre>