Öncelikle merhaba,

Kutu mantığın da bir tasarım dökümü yapıcaksanız tavsiye ul li yapısını kullanmanız. Reset css kullanmadığınızı varsayarak arkadaşların verdiği border-box kuralını kullanın ul li kullanarak hem daha az css kuralı yazarsınız hemde aynı özellikleri tekrarlamak zorun da kalmazsınız. Kutularınızın ortalı bir şekilde durmasını istiyorsanız ;

display: inline-block;
text-align: center;

bu iki kuralı ul içerisine yazarsanız li ye %100 dışın da ne değer verirseniz ortalı şekil de listeleme yapıcaktır. Ayrıca kutular da kaymalar söz konusu olursa eğer bunu ul için de ki li ye ;

vertical-align:top ;

değerini vererek kaymaları önleyebilirsiniz.

Bunların dışın da ek olarak li'ler de ki yazılarınız ortalı şekilde çıkmakta olursa yine ul nin için de ki li ye ;

text-align:left;

komutunu verebilirsiniz.


Dipnot : ul 'ye verdiğiniz text-align:center; işi garantiye almak içindir. onu kullanmadan deneyip işinize yaramazsa o kuralı da eklersiniz.