Несемантический CSS Framework, упаковка li's

Question

Я использую несемантическую в качестве адаптивной структуры. У меня есть некоторые li в меню нижнего колонтитула, которые идеально вписываются в одну строку, в настольной версии.

По какой-то странной причине, когда я изменяю размер своего браузера, чтобы он показывал мобильную версию, а затем снова изменял размер, чтобы я смотрел версию для настольного компьютера - в 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;}
}