Why is there a lot of empty space in the layout on standard android browsers?

Question

css

Hello.
For the first time I encountered such a problem that I can’t grammatically formulate in Google.
The point is.
Link to the patient
There is a site, everything is more or less normal on the frontend.
But! There is one not pleasant feature. It is worth opening on any standard browser of any android, the site adapts as needed, only leaving the space on the right tending to infinity.

Answer 1

In general, it was my jamb for inattention.
There was a problem in working out the "Burger". Not all elements on the mobile phone were hidden.
It was...

<div class="j-block__mobile">
  <a href="#j-offcanvas__leftmenu" class="j-button j-button__mobile">
      Каталог
  </a>
  <a href="#j-offcanvas__topmenu" class="j-button j-button__mobile">
      Меню
  </a>
  <!-- вырезано -->
</div>

So it became...

<div class="j-block__mobile">
  <a href="#j-offcanvas__leftmenu" class="j-button j-button__mobile">
      <span>Каталог</span>
  </a>
  <a href="#j-offcanvas__topmenu" class="j-button j-button__mobile">
      <span>Меню</span>
  </a>
  <!-- вырезано -->
</div>

In the adaptive, display: none did not work correctly on these elements, as a result, filling out the text in a span
and writing in css out of harm's way

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body{
    max-width: 100vw!important;
    overflow-x: hidden!important;
  }
  .j-block__mobile{
  max-width: 100%;
  }
  .j-button.j-button__mobile>span{
    display: none;
  }
}

I got the result that now everything is fine.

Answer 2

Alternatively, you could use the Dbug of the phone's browser through a computer and see what is leaving