HTML 中的空白是什么？

Question

I'm creating an application, more specifically the mobile version, and when I start to enter styles I see this blank space that I can't find where it comes from. Can anyone help me?

The app is being made with NextJS, the global styles I have are:

* {
  border: none;
    margin: 0;
    padding: 0;
  box-sizing: border-box;
}

html, body {
  display: block;
}

main {
  padding: 0;
  margin: 0;
  font-family: $primary_font;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 1

Setting a html style overflow-x: hidden is a band-aid way to remove that space.

To find the element that is causing the overflow, expand the DOM trees and hover over the elements until you find the one(s) that are sticking out. I'd start by looking at the "Asmae..." text, the header, and the footer if there is one.