Unwanted Margin Of Not Set In CSS/HTML

- 1 answer

Testing my Shopify store's responsiveness and found that at certain width some additional margin appears right-hand side of the entire document, but I can't find out why, 'cuz there's nothing at all related to margin/padding neither in CSS nor HTML itself.

I tried to supress scrollbars using overflow-x: hidden on body and html but it doesn't really help 'cuz on touch devices it's still possibele to scroll.

So far, I tested the issue on Chrome v61.0.3163.100(Official Build)(64-bit) and Mozilla Firefox v47.0.1 in Developer Mode. It appears on width 832px and 832px correspondingly.

Also, tried to spy on how CSS's @media, @query-at stuff gets picked up in Chrome Dev Tools but still have no clue what causes this bloody inset.

Here's a screenshot of the issue.

enter image description here

Thanks for helping.



Update left: 0 to right: 0 for the dropdown in the More item

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

Left 0 sets the menu item starting on the left side of containing parent and the with of it is longer than the parent length so it creates that extra space.