リスト横並び 謎の空白

Question

html

<nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">News</a><li> <li><a href="#">About</a></li> <li><a href="#">Access</a></li> <li><a href="#">Blog</a></li> </ul> </nav>

css
nav{
text-align: center;
}

nav ul{
margin:0;
padding:0;
}

nav ul li{
list-style:none;
display:inline-block;
width:18%;
}

これらを記述すると、「Abouto」の文字の上に謎の空白ができ、「Abouto」だけが一段下がったように表示されます。クロームの検証を使っても、そこに余白や要素は見当たりませんでした。
HOME　News　↓この下にAbout　　　　Access　Blog　　　こんな感じです。
上に示したコードと全く同じものを、いくつかのファイルや白紙のファイルで試してみましたがすべて同じ結果でした。
何が原因でしょうか。

Answer 1

Newsのliが閉じてないだけだと思います。

<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">News</a></li><!-- こいつを閉じてやってください -->
<li><a href="#">About</a></li>
<li><a href="#">Access</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>