css - 非セマンティック CSS フレームワーク、li のラッピング

Question

レスポンシブフレームワークとしてアンセマンティックを使用しています。デスクトップ バージョンでは、1 行に完全に収まるフッター メニューがいくつかあります。

奇妙な理由で、モバイル バージョンが表示されるようにブラウザのサイズを変更し、デスクトップ バージョンが表示されるように再度サイズ変更すると、下部の ul にいくつかの li が表示されます。

メニュー HTML

<nav id="the-footer-menu">
 <ul>
  <li><a href="home">Home</a></li>
  <li><a href="about">About</a></li>
  <li><a href="philosophy">Philosophy</a></li>
  <li><a href="services">Services</a></li>
  <li><a href="testimonials">Testimonials</a></li>
  <li><a href="home">FAQs</a></li>
 </ul>
</nav>

デスクトップ CSS

#the-footer-menu ul li {
font-size: 13px;
padding: 0 10px;
border-right: 1px solid #fff;
float: left;
}

モバイル CSS

@media screen and (max-width: 767px){
 #the-footer-menu ul{text-align: center;}
 #the-footer-menu ul li{display: inline-block;float: none;}
}