Здравствуйте, возник такой вопрос, я верстаю по psd макету, в photoshop линии сетки настроены так, чтобы появлялись каждые 30px. Нашел приложение для chrome - Design Grid Overlay которое строит сетку. Но у приложения нет такой настройки как "линия каждые 30px", есть настройка количества колонок и gutters внутренние и внешние.
Design Grid Overlay я настроил так: количество колонок: 48 (потому как в psd макете на 1440px получается 48 колонок по 30px) и gutters внутренний: 1. Таким образом получил сетку как в photoshop.
Далее использовал PerfectPixel by WellDoneCode и посмотрел как сетка выглядит на картинке, все отлично, идентично сетке в photoshop.
Далее скомпилировал кастомный bootstrap количество колонок = 48, а grid-gutter-width = 20px,
далее сделал разметку, где решил проверить разные величины колонок в html, но они почему то не совпадают. Пример
https://yadi.sk/i/fzplbOjy32GhjQ - оранжевый цвет - колонки сетки, другие цвета это верстка используя колонки bootstrap, красный и зеленый цвет это 1 колонка bootstrap.
html: родитель элемента с классом row - body, ширина row и body 100%.
Подозреваю, что неправильно сконфигурировал кастомный bootstrap, но не могу понять где накосячил, подскажите?