物件に問題がありdisplay: box;ます。（非推奨であることは知っていますが、現時点ではフレックスボックスはどのブラウザーでもほとんど機能しません）。
ブラウザのサイズを変更すると、ウィンドウの幅が 4 つのアイテムの幅よりも狭くなり、<li>互いにカスケードしません。ものを削除すると、正常にdisplay:box;機能しますが、中央に配置されません。
これについて何かできることはありますか？それとも箱の特性の問題でしょうか？
ライブ: http://jsfiddle.net/ALGNq/2/
編集:これはFirefoxのみであることに気付きました。ただし、Chrome では、ブラウザが小さすぎると、ボックスが左側に「固着」します。