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

Question

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

页眉很好，但在 1080p 显示器上，内容和页脚左侧大约 50 像素，右侧大约 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;
}