Flex CSS - 最後の子だけでなくリスト項目に余白が残っています

私はゆっくりとFlexを理解していますが、ul.list float内のすべてのli要素をどのように作成できるのか混乱しています。私はそれを読んでいるアイテムを浮動させるためには、margin-left: autoを使いますが、これは最後の項目で正しく動作するように見えます。なぜなら、視点を1920px以上に、電子メールと電話番号の間のギャップが上がるようにサイズ変更するからです。 ..トップメニューの左側は、各li要素の間に同じ距離のままです。ここでFlex CSS - 最後の子だけでなくリスト項目に余白が残っています

は私のHTMLです：

<header class="ProMenu"> 
    <nav class="row align-middle expanded"> 
    <div class="small-12 medium-4 columns Links"> 
     <ul class="menu"> 
     <li><a href="#" title="">Link 1</a></li> 
     <li><a href="#" title="">Link 2</a></li> 
     <li><a href="#" title="">Link 3</a></li> 
     </ul> 
    </div> 
    <div class="medium-4 columns Logo"> 
     <a href="" title=""><img src="https://placehold.it/64x42" alt=""></a> 
    </div> 
    <div class="medium-4 columns Contact"> 
     <ul class="menu"> 
     <li><a href="tel:" title="">Phone: 0777123456</a></li> 
     <li><a href="mailto:" title="">Email: [email protected]</a></li> 
     </ul> 
    </div> 
    </nav> 
</header>

そして、私のCSS：

.ProMenu { 
    background: #0071c5; 
    width: 100%; 
} 
.ProMenu .row { 
    min-height: 60px; 
    max-width: 100%; 
} 
.ProMenu ul li a { 
    color: #FFF; 
} 
.ProMenu .Logo { 
    text-align: center; 
} 
.Contact ul li{ 
    margin-left: auto; 
}

JSFiddle：

そして、私は、コードをアップロードしたものを容易にするために、複製するにはonline JSfiddleに大きなウィンドウを開き、携帯電話番号と電子メールの両方の距離を監視する...私が止めたいもの。

出典

2017-02-23 Simon Hayter

こんにちは@Michael_Bを適用する基礎.align-rightクラスを利用したいが、私はそれ事実上純粋に他のマイケルの答えを受け入れましたこのプロセスを提供するために、すでにビルドされたクラスを使用します。御時間ありがとうございます。; –