Откуда появляется горизонтальный отступ у инлайн-блоков?
Вы меняете способ отображения блочного элемента на строчный (inline). В этом случае элемент ведет себя как символ. Так же как буква или цифра или спец.символ в тексте. А особенностью символов является межсимвольный и междустрочный интервалы. На скриншоте вы как раз и видите междустрочный интервал между inline-блоками.
Помогло vertical-align:.item {
// ...
vertical-align: middle 
}
По умолчанию было baseline (браузер ставил), из-за этого были отступы. Хотя я не понимаю, по какой логике.