Estoy creando una aplicación usando NextJS - Bootstrap, cuando reviso la pestaña de elementos, veo este extraño espacio discontinuo en la parte superior de la pantalla. No hay ningún elemento que tenga margin/padding-top en absoluto. No se puede hacer clic en absoluto.

Parece que el elemento con la clase d-flex (elemento flexible) tiene esta extraña brecha discontinua. Pero cuando reviso los elementos, este elemento flexible no tiene relleno ni margen.

En la imagen de arriba, hay una imagen en la parte superior. De forma predeterminada, debe colocarse en la parte superior de la pantalla. Pero de alguna manera, existe esta brecha discontinua. No puedo usar valores de margin-top negativos en la imagen porque no será el mismo para todas las resoluciones, romperá la capacidad de respuesta de la aplicación.

Probé margin: 0 and padding: 0 para casi todos los componentes en la parte superior (divs de envoltura, el componente de imagen, Html, cuerpo, etc.) nada funciona.

¿Por qué existe esta brecha y de dónde viene?

Editar: después de los comentarios, aquí están las partes CSS relacionadas

Este es el elemento principal (usando la clase Bootstrap d-flex, está en la imagen de arriba)

 .main-all-wrapper { max-width: 100%; height: 100vh; }

Este es el elemento de la imagen.

 .main-image-wrapper { width: 100%; height: 60%; max-width: 800px; max-height: 650px; position: relative; }

Cuerpo y HTML

 HTML, body { padding: 0; margin: 0; box-sizing: border-box; height: 100%;