Как бороться с inline-block и его отступами?
Есть несколько вариантов решения вопроса.
1. Лучший. Изучите наконец flexbox.
2. Хороший. Между inline-block div уберите переводы строк и пробелы.<div></div><div></div>
3. Неплохой. Между inline-block div закоментируйте переводы строк и пробелы.<div>
</div><!--
--><div>
</div>
4. Так себе. Для родителя содержащего все inline-block div задайте font-size: 0;
Если я правильно понял, нужно убрать лишнее пространство в 4px справа от картинок с чаем. Попробуйте сделать вычисляемый width у элемента с классом .dor.width: calc(100% + 4px);
Благодаря этому отступ справа в 4px должен уйти за пределы экрана.
Обновлено: если появляется скролл, должен убраться через overflow: hidden у родительского для .dor блока.