I'm coding in Next.js and found out that on each subpages in my project appears unwanted horizontal scrollbar, allowing to scroll about 30px or something. What's interesting is that this scrollbar appears only when content is longer than viewport. I tried to set overflow: hidden
to div
in Layout
component but it seems like the problem is somewhere higher in hierarchy. I also tried setting overflow
property to html, body
in css but it blocks sticky positioning of header.
Does anyone has idea what should I do?
I added this on my global.css and it worked
body {
overflow-x: hidden;
}