センターロゴとナビゲーションバー水平

Question

どのようにロゴ（img）とメニューリンクを水平にすることができますか？ロゴを左に、メニューを右に、横に中央にしたい。 ここに私のコードです！

おかげ

<div class="menu-container"> 
    <div class="logo"> 
    <a href="#"><img src=https://app.box.com/representation/file_version_186133299510/image_2048/1.png class="logo"></a> 
    </div> 
    <nav class="menu"> 
       <a href="#">Branding</a> 
           <a href="#">Logos</a> 
           <a href="#">Illustration</a> 
           <a href="#">Web</a> 
           <a href="#">Poster</a> 
           <a href="#">Letters</a> 
           <a href="#">All</a> 
           <a href="#">About</a> 
    </nav> 

</div> 
<div class="main-intro"> 
     <h2>Let's create something great together!</h2> 
    </div> 

--- CSS ---

* { 
    padding: 0px; 
    margin: 0px; 
} 

.menu-container{ 
    background-color: gray; 
    margin: 30px; 
    position 


} 

.logo { 
    height: 10em; 
    display: inline-block; 
    padding: 1em; 
    transition: all 0.6s ease; 
    -webkit-transition: all 0.6s ease; 
} 


.menu { 
    float: right; 
    margin: 2em; 2em; 0; 0; 
    display: inline-block; 
    vertical-align: center; 
} 

https://codepen.io/Randomood/pen/KmJpWX?editors=1100

Answer 1

はあなたからあなたのロゴの高さをCSS削除してみてください？

.logo { 
    display: inline-block; 
    padding: 1em; 
    transition: all 0.6s ease; 
    -webkit-transition: all 0.6s ease; 
} 

EDITED：

* { 
    padding: 0px; 
    margin: 0px; 
} 

.menu-container{ 
    background-color: gray; 
    margin: 30px; 
    position: relative; 
    padding: 1em; 
} 

.logo { 
    height:10em; 
    border: 1px solid red; 
    display: inline-block; 
    transition: all 0.6s ease; 
    -webkit-transition: all 0.6s ease; 
} 

.menu { 
    float: right; 
    margin: 4.5em 0em; 
    display: inline-block; 
    vertical-align: center; 
} 

Answer 2

ちょうどのみになり、あなたの "メニュー・コンテナ" それを修正しない

.menu-container{ 
    display:flex; 
    flex-direction:row; 
    justify-content:center; 
    background-color: gray; 
    margin: 30px; 
} 

Codepen