Fixer la position des éléments

Question

J'ai peu de problèmes avec les positions de mes éléments. Je veux montrer la navigation dans le côté droit après l'image du logo mais malheureusement, cela ne fonctionne pas correctement. Ci-dessous, vous pouvez voir ce que j'ai en ce moment. Comment puis-je le réparer? J'ai essayé d'utiliser float: droit au menu mais cela n'a pas aidé.

HTML balisage:

 <header> 
      <section class="section section--menu" id="Juno"> 
       <img id="logo" src="img/logo.png" height="150px" width="150px"> 

       <nav class="menu menu--juno"> 
        <ul class="menu__list"> 
         <li class="menu__item menu__item--current"><a href="#" class="menu__link">Home</a></li> 
         <li class="menu__item"><a href="#" class="menu__link">News</a></li> 
         <li class="menu__item"><a href="#" class="menu__link">FAQ</a></li> 
         <li class="menu__item"><a href="#" class="menu__link">Contact us</a></li> 
        </ul> 
       </nav> 
      </section> 
     </header> 

CSS:

.menu { 
    line-height: 1; 
    float: right; 
    margin-bottom: 15px; 
} 
#logo{ 
    margin-top:15px; 
} 
.section { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-align-items: center; 
    align-items: center; 
} 
.section--menu { 
    position: relative; 
    overflow: hidden; 
} 

Answer 1

peut-être de cette façon:

position:absolute; right: 10%; bottom: 10%;