Mystery Margin/Padding in Shopify Mobilia Theme

Question

В настоящее время я размял шаблон страницы продукта из темы Shopify Mobilia, и я не могу избавиться от поля/отступов по обе стороны страницы. Я просмотрел CSS и использовал Firebug без успеха.

Заголовок прекрасно, но содержание и нижний колонтитул имеют около 50 пикселей слева и 80 пикселей справа на дисплее 1080p. Это хорошо для контента с белым фоном, но немного уродливым для разделов с коричневыми фонами.

Страница в вопросе: http://higher-tea.com/products/subscription

Любые предложения с благодарностью приняты.

Спасибо.

Answer 1

Я заглянул в свой код, и это показывает, что

div.container { 
    margin: 0 auto; 
    padding: 20px 0; 
} 

Теперь margin:0 auto, неисповедимы пути, он в основном горизонтально выровнять элемент, на котором он применяется оставляя ту же запас по обе стороны, я так думаю оригинальная ширина была 1080px, но теперь страница имеет только 960px ширину (ссылка ниже)

@media only screen and (max-width: 1199px) and (min-width: 960px) 
.container { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
} 

поэтому оставляет нас с 1080-960 = 120px, так что в основном 60px 60px край на правой и левой, а также, дочерний контейнер от .container просто 940px долго и не имеет центра выравнивания, так что остальные 20 добавляется к правой стороне пространства, таким образом, делая запас 60px и 80px по обе стороны, надеюсь, что это помогло (ссылка ниже)

container .sixteen.columns { 
    width: 940px; 
}