Site has a vertical scrollbar on mobile

i am trying to make a homepage that will not have a vertical scrollbar but no matter what i do there is always a little bit of scrolling in mobile although i have used a height of 100vh this is a live example site: https://funny-pavlova-09ba86.netlify.app/ and this is the code for it:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="test.css">
    <title>Test App</title>
  </head>
  <body>
    <div class="App">
        <h1>"This is only the beginning!"</h1>
    </div>
  </body>
</html>

CSS

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

.App {
    background-image: url("https://images.unsplash.com/photo-1532581140115-3e355d1ed1de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
}

h1 {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.637);
    font-size: 3rem;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
}