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

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?

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

1 Like

Try removing margin 8px in body

1 Like