center ul navigation in header

Question

私はこれが何度も尋ねられたことを知っているので、私はこの回答を検索しようとしました。どのようにしてこのul navを中心に置くことができますか？ありがとうございました！

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

一つの解決策は、幅をUL（*私はここMIN-幅使用しました）、ブロックに設定し、0 autoにマージンを設定するメニューを提供することです：

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

Howeve：

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

とは何の浮きがないように.header .menuを設定しましたこれは完全な解決策ではありません。小さいサイズの画面にブレークポイントを記述する必要があります。