小さな画面でさまざまな幅のナビゲーションアイテムの整列を維持する

Question

私のナビゲーションメニューをワードプレスのウェブサイトに合わせようとしています。私が持っている唯一の問題は、ブラウザがモバイルwidthにスケールダウンされたときです...ナビゲーション内の最後の項目は、その前の項目がわずか3文字であるため、ナビゲーション内の他の項目と揃っていません。

プレビュー：

マイコード：

@media only screen and (min-width: 388px) and (max-width: 480px) { 
    .nav li:last-child a { 
     margin-left: 20px; 
    } 
} 

をしかし、私は、ブラウザのサイズを変更すると...それは行く：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

<div class="collapse navbar-collapse"> 
<nav id="nav"> 
    <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav')); ?> 
</nav> 

私は現在、メディアクエリを使用していますアラインメントがwidth 388pxにぶち壊され、その間にo n私のiphone 6それはwidth 375pxにその点に行く。メニューを整列するにはより良い方法がありますか、ここでメディアのクエリに固執すべきですか？

UPDATE

JSFiddle

問題を再現するためにJSFiddle出力パネルに438pxに幅を変更してください。

Answer 1

すべてのナビアイテムを同じ幅にするだけで、ページ上のすべてのスペースが同じにならないのはなぜですか？

これを試してみてください：

#nav li { 
    /* padding: 0 16px; <-- remove; use text-align instead */ 
    font: 400 18px/13px 'Open Sans', sans-serif; 
    display: inline-block; 
    width: 5em; 
    text-align: center; 
    border: 1px solid black; /* for illustration only */ 
} 

Revised Demo