Currently, I am working on developing a mobile application, and as I start adding styles, I notice a mysterious blank space that seems to be appearing out of nowhere. Can anyone provide any insights or suggestions to help me troubleshoot this issue?
https://i.sstatic.net/lxWfL.png
The mobile app is being built using NextJS, and some of the global styles that have been applied so far include:
* {
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;
}