未在 CSS/HTML 中设置 <html> 不需要的边距

Question

测试我的 Shopify store's 响应能力，发现在一定的宽度下，整个 document 的右侧会出现一些额外的边距，但我无法找出原因，因为这里什么都没有都与 margin/padding 相关，既不在 CSS 也不在 HTML 本身。

我尝试在 body 和 html 上使用 overflow-x: hidden 来抑制滚动条，但它并没有真正帮助'因为在触摸设备上它仍然可以滚动。

到目前为止，我在开发者模式下在 Chrome v61.0.3163.100(Official Build)(64-bit) 和 Mozilla Firefox v47.0.1 上测试了这个问题。它相应地出现在宽度 832px 和 832px 上。

另外，试图窥探 CSS 的 @media、@query-at 内容如何在 Chrome Dev Tools 中获取，但仍然不知道是什么原因造成的血腥插图。

这是问题的屏幕截图。

感谢您的帮助。

Answer 1

将“更多”项目中的下拉菜单 left: 0 更新为 right: 0

#moreMenu .site-nav--dropdown {
    right: 0;
}

Left 0 设置菜单项从包含父项的左侧开始，并且它的长度比父项的长度长，因此它创建了额外的 space。

Unwanted margin of <html> not set in CSS/HTML