ナビゲーションバーにリストアイテムを配置する方法

Question

CSS3を使用してウェブサイトのリストアイテムを中心にして問題を起こしています。

以下

私の問題のスクリーンショットです： 以下https://gyazo.com/4b68df7e38e71ae320fdb6cb1c0c4e87

私は私のナビゲーションバーのために書かれているCSS3とHTMLコードです：

.navigation ul { 
 
    background-color: #A1C9EC; 
 
    border-style: solid; 
 
    border-color: #9FABB6; 
 
    border-width: 1px; 
 
} 
 

 
.navigation ul li { 
 
    display: inline-block; 
 
    border-style: solid; 
 
    border-color: #9FABB6; 
 
    border-width: 1px; 
 
    border-radius: 5px; 
 
    padding-left: 1em; 
 
    padding-right: 1em; 
 
    background-color: #ffffff; 
 
    border-top-color: #ffffff; 
 
    margin: 1em; 
 
}

<!--Wrapper to adjust width of main body on desktop site.--> 
 
<div class="wrapper"> 
 
    <h1>Shane's Portfolio</h1> 
 
    <!--Navigation Bar (TOP)--> 
 
    <div class="navigation"> 
 
    <nav> 
 
     <ul> 
 
     <li>Home</li> 
 
     <li>My Work</li> 
 
     <li>Qualifications</li> 
 
     <li>About Me</li> 
 
     <li>Contact Me</li> 
 
     </ul> 
 
    </nav> 
 
    </div>

Answer 1

を与えることは簡単だろうあなたは0に設定する必要がある理由、これはデフォルトのパディングを持っています。

（また、私はあなたが「ファイル名を指定して実行コードが切り取ら」をクリックするだけで右の出力を持つようにナビゲーションリストと単語を短縮しました）

.navigation ul{ 
 
    background-color: #A1C9EC; 
 
    border-style: solid; 
 
    border-color: #9FABB6; 
 
    border-width: 1px; 
 
    text-align: center; 
 
    padding-left: 0; 
 
} 
 

 
.navigation ul li 
 
{ 
 
    display: inline-block; 
 
    border-style: solid; 
 
    border-color: #9FABB6; 
 
    border-width: 1px; 
 
    border-radius: 5px; 
 
    padding-left: 1em; 
 
    padding-right: 1em; 
 
    background-color: #ffffff; 
 
    border-top-color: #ffffff; 
 
    margin: 1em; 
 
}

<div class="wrapper"> 
 
    <h1>Shane's Portfolio</h1> 
 
    <!--Navigation Bar (TOP)--> 
 
    <div class="navigation"> 
 
     <nav> 
 
      <ul> 
 
       <li>Home</li> 
 
       <li>My</li> 
 
       <li>Qua</li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</div>

Answer 2

text-align: center; 

ラッパーのdivでそのトリックを行う必要があります。あなたはhtmlコードを共有することができれば、あなたが.navigation ul {<ul>秒に

text-align: center; 
padding-left: 0; 

を追加する必要が答え