javascript - html/body doesn't fit my content, load zoomed

Question

Why in mobile mode the page container is loaded bigger than html/body container like in the photo??

here is my css:

html {
  margin-top: 48px;
  width: 100%;
}

body {
  margin: 0;
  width: 100%;
  background: var(--bgGray);
  font-family: Ubuntu, Ubuntu Mno, Verdana, sans-serif;
  color: var(--offWhite);
}


.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/*div container*/
.about-grid {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 4.5fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0.5rem;
  grid-template-areas: "txt-about sidebar-cont";
  padding-top: 30px;
}

@media screen and (max-width: 850px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "txt-about"
      "sidebar-cont";
  }
}

question from:https://stackoverflow.com/questions/65647189/html-body-doesnt-fit-my-content-load-zoomed