Why there is still scroll for x-axis even nothing overlap x-axis?

Why there is still scroll for x-axis even nothing overlap x-axis?
0.0 0

#1

pen: [ https://codepen.io/ustvarno/full/EyQaWQ/ ]
i don’t want to use overflow-x:hidden, cause i want scroll in x-axis if user is on small device…
but here i open on wide screen and there is scroll for x-axis

this can be solved with @media queries, but is there better solution, does anything in my html cause this behavior, cause nothing overlap visually x-axis?


#2

Removing the 100% height and width properties in the body solves this


#3

Try removing margin 8px in body