Empty white space at the bottom of my react app

Question

Hello I have a problem with the white space at bottom of my website. I checked stackoverflow and tricks like body { padding: 20px } or body { border: 1px solid black} does not work.

Background css (it covers whole page / it should cover whole page but there is a white space at bottom) I also checked if any component in my website has padding but only buttons has paddings and it did not solve problem.

.Background {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(248, 245, 245);
    min-height: 100vh;
    width: 100%;
    background-image: url('../../../images/Storm.jpg');
    object-fit: cover;
    object-fit: fill;
}



@media  screen and  (max-width: 35em)  { 
    .Background {
      height: auto;
        
    }
}

@media  screen and  (max-width: 65em)  { 
    .Background {
       height: auto;
        
    }
}

index.css

 html {
  height: 100%;
  width: 100%;
  font-size: 62.5%;
  box-sizing: border-box;
  margin-bottom: 0;
}

* {
  margin: 0;
  padding: 0;
}

*, 
*::after
*::before {
  box-sizing: inherit;
}

body {
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  overflow-y: hidden;
  
}

@media  screen and  (max-width: 35em)  { 
  body {
    overflow-y: scroll;
      
  }
}

@media  screen and  (max-width: 62.5em)  { 
  body {
    overflow-y: scroll;
      
  }
}

#root {
  height: 100%;
  width: 100%;
  margin-bottom: 0;
  
  
}



code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Answer 1

Make sure your viewport as the following

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">

Answer 2

a simple fix would be to add:

html, body {
    height: 100%;
    width: 100%;
}