title: Site has a vertical scrollbar on mobile
body: <p>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: <a href="https://funny-pavlova-09ba86.netlify.app/" rel="nofollow noreferrer">https://funny-pavlova-09ba86.netlify.app/</a>
  and this is the code for it:</p>
  
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;test.css&quot;&gt;
      &lt;title&gt;Test App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;App&quot;&gt;
          &lt;h1&gt;&quot;This is only the beginning!&quot;&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  .App {
      background-image: url(&quot;https://images.unsplash.com/photo-1532581140115-3e355d1ed1de?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80&quot;);
      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%);
  }
  </code></pre>