ロゴの中央と右のメニュー

Question

ロゴをページの中央に、次に右の3つのメニューアイテムにしたいと考えています。次のようにこれをしようとしていますが、動作していないので、ロゴはページの中央にありません。あなたはこれを行う方法を知っていますか？

HTML

<header class="container"> 
    <div class="content-full main_header"> 
     <div class="logo"> 
      <a>LOGO</a> 
     </div> 
     <div class="menu"> 
      <ul class="main_nav"> 
       <li><a href="">Item 1</a></li> 
       <li><a href=""><i class="fa fa-sign-in" aria-hidden="true"></i> Item 2</a></li> 
       <li><a href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Item 3</a></li> 
      </ul> 
     </div> 
     <div class="clear"></div> 
    </div> 
</header> 

CSS

*, 
*:after, 
*:before { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    outline: 0; 
} 

a { 
    text-decoration: none; 
} 

ul { 
    list-style: none; 
} 


.container { 
    float: left; 
    width: 100%; 
} 

.content-full { 
    width: 100%; 
} 

.main_header { 
    border-bottom: 1px solid #d2d6df; 
    color:$color-white; 
    height: 60px; 
    float: left; 
    background-color: red; 
    text-align: center; 

} 

.logo{ 
    line-height: 60px; 
    text-align: center; 
    background-color: yellow; 
    display: inline; 

} 

.menu{ 
    display: inline; 
    background-color: blue; 
    text-align: right; 
    float: right; 

} 

.main_nav li { 
    float: left; 
    line-height: 60px; 
    text-transform: uppercase; 
    border-left: 1px solid #EFF2F5; 
    padding-left: 20px; 
    padding-right: 20px; 
    font-size: 0.8em; 
    letter-spacing: 0.5px; 
    border-radius: 0px; 
} 

.main_nav a { 
    color: gray; 
} 


.main_nav .create{ 
    color:green; 
} 

.main_nav .create:hover{ 
    color:green; 
} 

Answer 1

メニューのために追加します。

.menu{ 
    position: relative; 
    top: -60px; 

} 

とDOMのために：

<header class="container"> 
    <div class="content-full main_header"> 
     <div class="logo"> 
      <a>LOGO</a> 
     </div> 
    </div> 
    <div class="menu"> 
      <ul class="main_nav"> 
       <li><a href="">Item 1</a></li> 
       <li><a href=""><i class="fa fa-sign-in" aria-hidden="true"></i> Item 2</a></li> 
       <li><a href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Item 3</a></li> 
      </ul> 
     </div> 
</header>