title: how to place the "social-media" div in the top right corner of the header?
body: <p>EDIT: I added <code>text-align: right;</code> to <code>social-media</code>, but now I'm looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/2KePj.png" alt="enter image description here"></p>
  
  <p>I am trying to adjust my social media icons in the top right corner of my header (right above where they currently are):</p>
  
  <p><img src="https://i.stack.imgur.com/WFHVi.png" alt="enter image description here"></p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;header id="branding" role="banner"&gt;
              &lt;div class="header_nav"&gt;
              &lt;div class="head-logo"&gt;
                      &lt;h1 id="site-title"&gt;&lt;a href="/"&gt;&lt;img class="title-image" title="Boli Stylus" src="http://www.bolistylus.com/wp-content/uploads/BoliNewLogo_Diff.png" alt="stylus for iPad"/&gt;&lt;/a&gt;&lt;/h1&gt;
                      &lt;!--&lt;h2 id="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt;--&gt; 
              &lt;/div&gt;
  
              &lt;div class="social-media"&gt;
              &lt;ul class="sm-icons"&gt;
                  &lt;li class="social"&gt;&lt;a href="http://www.facebook.com/"&gt;&lt;img class="sm-img" src="http://www.bolistylus.com/wp-content/uploads/facebook.png" alt="facebook"&gt;&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li class="social"&gt;&lt;a href="http://www.twitter.com/"&gt;&lt;img class="sm-img"src="http://www.bolistylus.com/wp-content/uploads/twitter.png" alt="twitter"&gt;&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li class="social"&gt;&lt;a href="http://www.vimeo.com/"&gt;&lt;img class="sm-img"src="http://www.bolistylus.com/wp-content/uploads/vimeo.png" alt="vimeo"&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;   
              &lt;/div&gt;
  
              &lt;div class="head-nav"&gt;
              &lt;ul&gt;
  
                              &lt;li&gt;&lt;a href="/shop"&gt;SHOP&lt;/a&gt;&lt;/li&gt;      
  
                              &lt;!--&lt;li&gt;&lt;a href="/products/cosmonaut"&gt;BOLI+&lt;/a&gt;&lt;/li&gt;--&gt;
  
                              &lt;li&gt;&lt;a href="/about-us"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
  
                              &lt;li&gt;&lt;a href="/faq"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  
                              &lt;!--&lt;li&gt;&lt;a href="/pages/press"&gt;PRESS&lt;/a&gt;&lt;/li&gt;--&gt;    
  
                              &lt;li&gt;&lt;a href="/cart"&gt;YOUR CART&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;  
              &lt;br style="clear: both;"/&gt;
  &lt;/div&gt;
  
      &lt;/header&gt;&lt;!-- #branding --&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>a { 
      color: #254655; 
  }
  
  ul, ol {
      margin: 0 0 0 5.5em;
  }
  
  #page {
      margin: 0 auto;
  }
  
  body{
  background: #f3f3f3;
  border-top: none;
  border-top: 10px solid #666666;
  }
  
  #page {
      margin: 0em auto;
      width: 1000px;
  }
  
  .singular.page .hentry {
      padding: 0.5em 0 0;
  }
  
  #branding{
  background: #f3f3f3;
  color: #000000;
  border-top: none;
  position: relative;
  z-index: 2;
  }
  
  #site-title {
      /*margin-right: 270px;*/
      padding: 0.66em 0 0 0;
  }
  
  #site-title a {
      color: #111111;
      font-size: 60px;
      font-weight: bold;
      line-height: 36px;
      text-decoration: none;
  }
  
  #branding h1, header#branding a{  
  text-align: left;
  margin-right: 0;
  }
  
  #branding span{
  text-align: center;
  }
  
  #branding img {
      height: auto;
      margin-bottom: -.66em;
      width: auto;
  }
  
  #branding .title-image {
      width: 30%;
  }
  
  #branding .social-media {
      float: right;
  }
  
  #branding .widget{
  position: absolute;
  top: 2em;
  right: 7.6%;
  }
  
  #respond{ background: #E7DFD6; }                     
  
  .welcome{
  margin: 15px 60px;
  background: #f3f3f3;
  border: 1px solid #f6ff96;
  padding: 15px;
  text-align: center;
  }
  
  /* =Menu
  -------------------------------------------------------------- */
  /*.header_nav ul{
      margin: 0; 
      padding: 0;
      text-align: center;
      width: 400px;
      }
  */
  
  #branding img .sm-img {
      height: auto;
      margin-bottom: -.66em;
      width: 100%;
  }
  
  .header_nav {
      background: #f3f3f3
      }
  
  
  .header_nav .head-nav { 
      border-bottom: 1px solid #cfcec9;
      border-top: 1px solid #cfcec9;
      margin-top: 30px;
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: right
      }
  
  .header_nav ul li{
      display: inline;
      }
  
  .header_nav ul li a{ 
      padding: 10.5px 21px;
      color: #000000;
      }
  
  .header_nav ul li a:hover, .menu ul li .current{
      color: #a8cb17;
      text-decoration: none;
      }
  
  
  
  #access {
      background: #f3f3f3; /* Show a solid color for older browsers */
  }
  #access ul {
      font-size: 13px;
      list-style: none;
      margin: 0 0 0 -0.8125em;
      padding-left: 0;
  }
  #access li {
      float: center;
      position: relative;
      display: inline;
  }
  #access a {
  
  }
  #access ul ul {
  
  }
  #access ul ul ul {
  
  }
  #access ul ul a {
  
  }
  #access a:focus {
  }
  #access li:hover &gt; a,
  #access a:focus {
  }   
  #access ul li:hover &gt; ul {
  }
  #access .current_page_item &gt; a,
  #access .current_page_ancestor &gt; a {
      font-weight: bold;
  }
  </code></pre>