title: Multiple Images in Header Div
body: <p>I am looking to have the logo aligned in the center and social media buttons aligned on the right in the header. How do I achieve? I've been able to get it aligned with my nav bar but that's not what I'm looking for. Any help would be appreciated. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
  
  &lt;header&gt;
  &lt;div class="logo"&gt;
      &lt;a href="index.html"&gt;&lt;img src="http://i.imgur.com/cosDXx1.png"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class ="social"&gt;
      &lt;a href="http://instagram.com/phipsibing"&gt;&lt;img src="http://i.imgur.com/1GhbSOj.png"/&gt;&lt;/a&gt;
      &lt;a href="https://twitter.com/phi_psi_bing"&gt;&lt;img src="http://i.imgur.com/oawoJtC.png"/&gt;&lt;/a&gt;
      &lt;a href="https://www.facebook.com/phipsi.sociallist?fref=ts"&gt;&lt;img src="http://i.imgur.com/2dAtAX3.png"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/header&gt; 
  
  &lt;nav&gt;
      &lt;ul class="egmenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="has-sub"&gt;About&lt;/a&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Brothers&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="has-sub"&gt;Philanthropy&lt;/a&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kovacs Color Run&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Greek God&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Boys &amp; Girls Club&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Membership&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      margin:0px;
      padding:0px;
  }
  header {
      height:105px;
      background-color:black;
      text-align:center;
  }
  
  header img{
      display:inline-block;
      margin: 0 auto;
  }
  
  header .social a {
      float:right;
  }
  
  
  ul.egmenu {  
      background: #333; 
      height: 30px;
      width: 100%;
      text-align:center;
  }
  
  ul.egmenu &gt; li {  
      position: relative; 
      display:inline-block;
      list-style:none;
  }
  
  ul.egmenu ul {
      background: #444; 
      display: none; 
      position: absolute;
      left: 0; top: 100%;
  }
  
  ul.egmenu a { 
      cursor: pointer; 
      display: block; 
      color: white; 
      line-height: 30px; 
      padding: 0 20px; 
      text-decoration:none;
  }
  
  ul.egmenu li { 
      list-style: none;
  }
  
  ul.egmenu li:hover { 
      background: #555;  
  }
  ul.egmenu li:hover ul { 
      display: block;
      padding:0;  
  }
  
  @media all and (max-width: 600px) {
      ul.egmenu {  height: auto; padding:0;}
      ul.egmenu &gt; li {  float: none; width: 100%; }
      ul.egmenu a { line-height: 40px; }
      ul.egmenu ul { position: relative; }
  }
  
  @media all and (min-width: 601px) {
      ul.egmenu li:hover { background: #555;  }
      ul.egmenu li:hover ul { display: block;  }
  }
  
  @media all and (max-width: 600px) {
      ul.egmenu {  height: auto; }
      ul.egmenu &gt; li {  float: none; width: 100%; }
      ul.egmenu a { line-height: 40px; }
      ul.egmenu ul { position: relative; }
  
      ul.egmenu li.tap { background: #555;  }
      ul.egmenu li.tap ul { display: block;  }
  }
  </code></pre>
  
  <p>Heres a fiddle: <a href="http://jsfiddle.net/mcxa341s/" rel="nofollow">http://jsfiddle.net/mcxa341s/</a></p>