Shopify Mobilia主题中的神秘边缘/填充

Question

我目前正在从Shopify Mobilia主题中屠杀产品页面模板，我无法摆脱页面两侧的边距/填充。我已经搜索过CSS并使用了Firebug但没有成功。

标题很好，但内容和页脚在左侧约为50像素，在1080p显示屏上右侧为80像素。这对于具有白色背景的内容来说很好，但对于具有棕色背景的div来说有点难看。

有问题的网页： 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;
}