Center ul Navigation in der Kopfzeile

Question

Ich habe versucht, nach dieser Antwort zu suchen, wie ich weiß, das wurde oft gefragt, jeder vorherige Vorschlag, den ich gefunden habe funktioniert nicht für mich. Wie kann ich dieses ul nav zentriert werden und nicht richtig schwimmen? Vielen Dank!

jsfiddle link here

<header> 
    <div id="header-content"> 
    <nav class="header"> 
     <input class="menu-btn" type="checkbox" id="menu-btn" /> 
     <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
     <ul class="menu"> 
     <li><a href="#work">Our Work</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#careers">Careers</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

nav.header { 
    width: 100%; 
    height: auto; 
    float: right; 
    background-color: Silver; 
    text-align: left; 
    margin: 0 0 10px 0; 
} 
.header ul { 
    display: inline-block; 
    list-style-type: none; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
} 
.header ul li { 
    display: block; 
    float: left; 
} 
.header li a { 
    display: block; 
    float: left; 
    padding: 1em; 
    /* border-right: 1px solid #f4f4f4;*/ 
    text-decoration: none; 
    color: #000000; 
} 
.header li a:hover { 
    background-color: #B5B5B5; 
} 

Answer 1

Eine Lösung ist das Menü ul eine Breite (* Ich habe min-width hier verwendet wird) geben, es zu einem Block gesetzt, und stellen Sie die Marge auf 0 auto:

.header ul { 
    display: block; 
    list-style-type: none; 
    text-align: center; 
    margin: 0 auto; 
    padding: 0; 
    min-width: 450px; 
} 

Und gesetzt .header .menu keine Schwimmer zu haben:

.header .menu { 
    clear: none; 
    float: none; 
    max-height: none; 
} 

Howeve Dies ist keine perfekte Lösung, da Sie in Haltepunkten für kleinere Bildschirme schreiben müssen.