Добавление прокладки в стороны продолжает разворачивать макет

Question

Я думал, что у меня есть Сьюзи, но уже пару часов борется с этим. Я чувствую себя невероятно глупо, потому что у меня никогда не было этой проблемы раньше, поэтому я знаю, что это на моем конце. Вероятно, непонимание модели коробки, но вот то, с чем я столкнулся.

У меня есть мой контейнер div, и в нем #main div с 9 столбцами для контента и боковая панель с 3 колонками. #main div имеет белый фон, поэтому мне нужно некоторое дополнение к нему, но всякий раз, когда я добавляю прокладку, разрывы компоновки и боковая панель сбрасываются вниз.

нет обивки:

с прокладкой:

моего HTML структура не является:
.container
+ Основная
++ содержания (@include оболочки (9))
++ sidebar (@include span (последние 3))

У меня также есть размер рамки для габаритов в глобальном масштабе как в html, так и в настройке susy. Если я добавлю ширину: 100% и размер окна: контент-ящик для #main div, это работает, но делает контейнер более широким с правой стороны, проталкивая его мимо элементов выше и ниже него, что я понимаю с момента создания содержимого добавляет к нему. Это работает в некотором смысле, но не в моем желаемом результате. Мне нужно, чтобы #main div оставался той же ширины, но позволял мне добавлять отступы влево и вправо.

Как я уже сказал, это новый вопрос для меня. Я создал несколько сайтов с Susy и раньше не имел этой проблемы, поэтому я чувствую себя невероятно глупо.

Обновление 1: добавление отступов к работам div и содержимому содержимого, за исключением того, что на одной из моих страниц у меня есть галерея изображений в Content div, которая делает то же самое, третий элемент в строке падает на дно.

Обновление 2: Проведя весь день и работая над этим, я пришел к выводу, что это связано с тем, что это фиксированный сайт с фиксированными ширинами столбцов. Макет не разбивается, когда ширина divs устанавливается в% даже с контейнером с фиксированной шириной. Интересно. Возможно, есть способ заставить Сьюз работать так, используя математический вывод «статический», я не уверен.

Answer 1

Добавьте его к столбцам, как это:

#content { 
    @include span(9 of 12); 
    padding: 20px 0 20px 20px; 
} 

#sidebar { 
    @include span(last 3 of 12); 
    padding: 20px 20px 20px 0; 
} 

Здесь он работает:

http://codepen.io/yivi/pen/BywygG

А вот с математикой жидкостью: http://codepen.io/yivi/pen/jEGEjj

С уважением

Answer 2

Я смог исправить это, увеличив его на 1 колонку.

http://codepen.io/anon/pen/RNZOQL

columns: 13 

Проблема была из-за заполнения вам нужно дополнительные колонки.