フレックスボックスの垂直配置 - 項目が完全でない

Question

私はヘッダーを作成しようとしていますが、片側にはナビゲーション付きのロゴとユーザーのための他のオプションがあります。しかし、私は問題に遭遇する - 反対側の項目は完全に中心に置かれていない。私は詰め物を取り除こうとしましたが、結果は同じままでした。

これを修正する方法はありますか？

header 
    nav 
    img(src="assets/img/logo.png").logo 
    div.divider 
    ul 
     li: a(href="") Link 
     li: a(href="") Link 
     li: a(href="") Link 
     li: a(href="") Link 
    div.options 
    div.leagues-dropdown Option 
    div.date-picker Option 
    div.search Option 
    div.account Option 

そしてSASS

header 
    height: 67px 
    padding: 0 25px 
    display: flex 
    justify-content: space-between 
    border-bottom: 1px solid #D2D2D2 
    align-items: center 

    .logo 
     width: 67px 
     height: 15px 
     padding-right: 25px 

    .divider 
     height: 67px 
     border-left: 1px solid #D2D2D2 
     padding-right: 25px 

    nav 
     display: flex 
     align-items: center 

     a 
      opacity: 0.55 
      font-family: OpenSans-Bold 
      font-size: 12px 
      color: #000000 
      text-transform: uppercase 
      text-decoration: none 

     ul 
      display: flex 
      li 
       padding: 0 10px 

    .options 
     display: flex 
     align-items: center 

     div 
      padding: 0 10px 
      opacity: 0.55 
      font-family: OpenSans-Bold 
      font-size: 12px 
      color: #000000 
      text-transform: uppercase 

http://codepen.io/anon/pen/zZGeLO

Answer 1

あなたは右行っているが、私はその後、私は上のdisplay: flexとalign-items:centerを使用するのと同じ親の下にオプションのナビゲーションとリンクナビゲーションを置きます親。この方法で、あなたは彼らが同じ行にいることを100％確信しています。