Неправильно высчитываются отступы у элементов сетки?

Question

[thehighhomie]

В целях развития решил написать специфичную сетку, но застрял в самом начале, на странном поведении, от которого я в ступоре.

Есть контейнер и внутри него элементы с 50% шириной. В сетке я высчитываю отступы (css left/top) для элементов а высоту и ширину не трогаю.

Но дело в том, что элементы ведут себя странно, отступы не правильные каждый раз когда я добавляю элементы, да еще и горизонтальный скролл появляется вместе с вертикальным, хотя у элементов в размеры указаны в css и с процентами... Не могу разобраться в чем дело.

Посмотрите пожалуйста песочницу https://codesandbox.io/s/3xjz3kr43m

Подскажите почему такое происходит и как можно решить это?

Answer 1

[Максим Толкачев]

Добавь для

.item display: inline-block

И для

#container font-size: 0