メニューの位置が動かない

Question

こんにちは。
現在以下のサイトを制作しているのですが、メニュー(ABOUT,ARCHIVEなど)の位置をどうしても中央に移すことができません。
http://hit-tsumami.com/

text-align:center;
を使用してもなぜか右や左によってしまいます。

widthを変更しても現在の大きさ以上にならないため、言い方が正しいかわかりませんが何かが引っかかっていて動かない、というようなイメージです。

追加で必要な情報があればお教えください。
宜しくお願い致します。

Answer 1

まず、

.top-nav{
  width:100%; //今はwidth指定なしなのでauto
}
.nav > li{
  display:inline-block;
  //position:relative;
  //float:left;
}

にしてあげて下さい！
text-align:center;で中央寄せ出来るのはtext-align:center;が指定されている「中の」要素がdisplay:inline; or inline-blockの場合です！

また、floatをすると無条件でleft or rightに寄ってしまうのでここでは削除しています！

Comments

[hiro5797]

widthを変更しても現在の大きさ以上にならないため、言い方が正しいかわかりませんが何かが引っかかっていて動かない、というようなイメージです。
左右に寄ってしまうのはfloatのせいではないような感じがします。
曖昧で申し訳ありませんが何かお分かりであればご教示ください......

Answer 2

こんんちは

.nav{
width: 100%;
}
li{
    display: inline-block;
}

上記をそれぞれに追加して
liのfloat:leftは削除ですかね。