Yazıların ters durmasının nedeni resmi tarayıcıyla çekmem . Firefox'un responsive modunda çektiğimden öyle oldu.

li'ye verdiğim width: 100%'ü 45 - 40 - 35 olarak genişlik düştükçe değiştirebilirsiniz hocam ancak size önerim bu şekilde kullanmanızdır

her px için özel bir genişlik tanımlamanız mümkün değil. Ha mümkün ama 500'den 320'e ye kadar her px için tasarlamak çok zahmetli olacaktır.