Search code examples
htmlcssnext.jshorizontal-scrolling

Unwanted horizontal scrollbar in Next.js


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?


Solution

  • I added this on my global.css and it worked

    body {
      overflow-x: hidden;
    }