ヘッダーの右上隅に「ソーシャルメディア」divを配置する方法は？

Question

編集：私はsocial-mediaにtext-align: right;を追加しましたが、今はこのように探しています：

私は彼らが正しい場所の上に（私のヘッダの右上隅に私のソーシャルメディアのアイコンを調整しようとしています現在）は次のとおりです。ここで

はhtmlです：

<header id="branding" role="banner"> 
      <div class="header_nav"> 
      <div class="head-logo"> 
        <h1 id="site-title"><a href="/"><img class="title-image" title="Boli Stylus" src="http://www.bolistylus.com/wp-content/uploads/BoliNewLogo_Diff.png" alt="stylus for iPad"/></a></h1> 
        <!--<h2 id="site-description"><?php bloginfo('description'); ?></h2>--> 
      </div> 

      <div class="social-media"> 
      <ul class="sm-icons"> 
       <li class="social"><a href="http://www.facebook.com/"><img class="sm-img" src="http://www.bolistylus.com/wp-content/uploads/facebook.png" alt="facebook"></a></li> 

       <li class="social"><a href="http://www.twitter.com/"><img class="sm-img"src="http://www.bolistylus.com/wp-content/uploads/twitter.png" alt="twitter"></a></li> 

       <li class="social"><a href="http://www.vimeo.com/"><img class="sm-img"src="http://www.bolistylus.com/wp-content/uploads/vimeo.png" alt="vimeo"></a></li> 

      </ul> 
      </div> 

      <div class="head-nav"> 
      <ul> 

          <li><a href="/shop">SHOP</a></li>  

          <!--<li><a href="/products/cosmonaut">BOLI+</a></li>--> 

          <li><a href="/about-us">ABOUT US</a></li> 

          <li><a href="/faq">FAQ</a></li> 

          <!--<li><a href="/pages/press">PRESS</a></li>-->  

          <li><a href="/cart">YOUR CART</a></li> 
       </ul> 
      </div> 
      <br style="clear: both;"/> 
</div> 

    </header><!-- #branding --> 

ここ

CSSです：この場合に役立ちます

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 > a, 
#access a:focus { 
} 
#access ul li:hover > ul { 
} 
#access .current_page_item > a, 
#access .current_page_ancestor > a { 
    font-weight: bold; 
} 

Answer 1

.social-mediaボックスを浮かせる代わりに、右に揃えてください。ところで

#branding .social-media { 
    text-align: right; 
    float:right; //remove 
} 

が、私はあなたがあなたのCSSでこの宣言を持っていることに気づい：

#access li { 
    float: center; //?? 
    position: relative; 
    display: inline; 
} 

float:center;のようなものはありませんが、私は希望するが、そこではありませんので、あなたが削除することができますそれ。

Answer 2

を参照してください。

.social-media { 
    position:relative; 
    top:-12px; /* <-- Play with this. */ 
} 

Answer 3

アイコンを保持しているdivをフローティングにして、余白を付けて試してみてください。

.divClass{ 
    float:right; 
}