CSS：navbarと検索ボックス/アイコンを同じ行にまとめて整列する

Question

ナビゲーションバーと検索アイコン（CSS3を使用して、検索入力ボックスを表示するために外側に広がる）を取得しようとしています。私のコンテナ/ divの右側に表示されます。左揃えに問題はありません。右は問題です。 http://vps30689.inmotionhosting.com/~myclar5/

HTML

<header id="masthead" class="site-header"> 
    <nav id="site-navigation" class="main-navigation"> 
       <div class="menu-nav-container"> 
      <ul id="primary-menu" class="menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Products</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
     <form role="search" method="get" class="search-form" action="http://vps30689.inmotionhosting.com/~myclar5/"> 
       <label> 
        <span class="screen-reader-text">Search for:</span> 
        <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" /> 
       </label> 
       <input type="submit" class="search-submit" value="Search" /> 
      </form> 
      </nav> 
</header> 

CSS

/*-------------------------------------------------------------- 
## Menus 
--------------------------------------------------------------*/ 
.main-navigation { 
    display: block; 
    float: left; 
    width: 80%; 
} 
.main-navigation ul { 
    list-style: none; 
    margin: 30px 0 0 0; 
    padding-left: 0; 
} 
.main-navigation li { 
    float: left; 
    position: relative; 
} 
.main-navigation a { 
    color: #333d47; 
    display: block; 
    font-weight: 600; 
    text-decoration: none; 
    padding: 6px 18px; 
} 
/*-------------------------------------------------------------- 
## Saarch Form 
--------------------------------------------------------------*/ 
.site-header .search-field { 
    background-color: transparent; 
    background-image: url(http://vps30689.inmotionhosting.com/~myclar5/wp-content/themes/clarity/img/search-icon.png); 
    background-position: 5px center; 
    background-repeat: no-repeat; 
    background-size: 24px 24px; 
    border: none; 
    cursor: pointer; 
    height: 37px; 
    margin: 0; 
    padding: 0 0 0 34px; 
    position: relative; 
    -webkit-transition: width 400ms ease, background 400ms ease; 
    transition:   width 400ms ease, background 400ms ease; 
    width: 0; 
} 
.site-header .search-field:focus { 
    background-color: #fff; 
    border: 2px solid #c3c0ab; 
    cursor: text; 
    outline: 0; 
    width: 230px; 
} 
.search-form 
.search-submit { 
    display:none; 
} 

Answer 1

項目を移動するために、親、およびjustify-content: flex-end;に使用flex：ここhttps://codepen.io/anon/pen/KmgoqEでもあり、ここで問題になっているWebページの現在のコードは、ですメニューとアイコンを垂直に整列させるには、align-items: baselineを使用します。

.main-navigation { 
    float: left; 
    width: 80%; 
    display: flex; 
    justify-content: flex-end; 
    align-items: baseline; 
}