Ausrichtung von Navigationselementen unterschiedlicher Breite auf kleineren Bildschirmen beibehalten

Question

Ich versuche, mein Navigationsmenü auf meiner Wordpress-Website auszurichten. Das einzige Problem, das ich habe, ist, dass, wenn der Browser auf Handy width herunterskaliert wird ... das letzte Element in der Navigation nicht mit anderen Elementen in der Navigation ausgerichtet ist, da das Element davor nur 3 Buchstaben lang ist.

Vorschau:

Mein Code:

<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> 

I Medienanfragen sind derzeit:

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

Aber wenn ich den Browser der Größe ... es geht zu dem Punkt, an dem die Ausrichtung bei width 388px durcheinander gebracht wird, während o n meiner iphone 6 geht es zu diesem Punkt bei width 375px. Gibt es eine bessere Möglichkeit, mein Menü auszurichten oder sollte ich mich hier an Medienabfragen halten?

UPDATE

JSFiddle

Bitte geben Sie die Breite auf 438px auf dem Panel JSFiddle Ausgabe das Problem zu reproduzieren ändern.

Answer 1

Warum nicht alle Navigationselemente gleich breit machen, so dass sie alle den gleichen Platz auf der Seite einnehmen?

Versuchen Sie folgendes:

#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