Avoiding an horizontal scrollbar on mobile-CodePudding

Google Webmaster Tools reports that this page - https://www.shlomifish.org/__Beta-kmor/meta/FAQ/about.xhtml - has a horizontal scrollbar in mobile mode. I verified its presence using Firefox's Ctrl-shift-m in 360x740 portrait mode. How can I eliminate the horizontal scrollbar there?

Note that adding main { overflow: scroll; } is a symptomatic (and not too good) fix, and I'm seeking a better solution.

( The XHTML and CSS both validate. )

CodePudding user response：

main.main {
     max-width: 100vw;
}

or, more specific with media query:

@media (max-width:450px) {
  main.main {
      max-width: 100vw;
  }
}

CodePudding user response：

You need to change your grid display setup on your body. On mobile change on display block and it'll works.

@media (max-width:650px) {
  body {
      display:block;
  }
}