Full page div overlapping full page sibling when resizing to mobile

The site consists of 3 stacked full page divs. When I resize my site to mobile sizes, one of the divs moves slightly on top of the previous div. If I make it even smaller, it completely overlaps the previous div. However, in desktop screen sizes there is no problem. The full page divs are wrapped in the following style:

* {
margin: 0;
padding: 0;
}

html,
body {
  margin: 0;
}

body {
  font-family: "Roboto Mono", monospace;
}

.wrapper {
  height: 100vh;
  width: 100vw;
}

What am I missing here? Thanks in advance!