【CSS】レスポンシブのWebサイトを作っており、メニュー（li）をfloatで横並びにさせているのですが、最後のliだけ、カラム落ちのような状態になっております。
ulとli自体は％で指定しており、画面の幅を変えてもカラム落ちの状態は変わらないのですが、ブラウザの横幅をいじってスマホサイズの画面に切り替えた後、再びPCサイズの画面に切り替えると、カラム落ちはしていないのですが、更新ボタンを押すと再びカラム落ちの状態になります。
アドバイスをいただけるとありがたいです。

----- 表示させたい形 -----

　　　　　　ナビゲーション
ナビ1　ナビ2　ナビ3　ナビ4　ナビ5

①ulの名前が横並びにさせたliの上に表示される
②画面サイズに応じて、横幅だけ変化する（高さは固定）
※文字の表示位置（中央寄せ）やリストデザインは下記CSSには含みません。

----- HTML -----
<section>
<ul>ナビゲーション
<li>ナビ1</li>
<li>ナビ2</li>
<li>ナビ3</li>
<li>ナビ4</li>
<li>ナビ5</li>
</ul>
</section>

----- CSS -----

ul, li {
margin: 0 0;
padding: 0 0;
}

section {
width: 100%;
height: 60px;
position: relative;
}

ul {
width: 100%;
height: 30px;
position: relative;
top: 0;
left: 0;
}

li {
width: 20%;
height: 30px;
float: left;
position: relative;
top: 30px;
left: 0;
}

よろしくお願いします。。