Why elements on screen are not fullscreen?

I don't have my web-app on react full-screen, having so small amount of elements on the page. Css:

html {
  height: 100%; width: 100%;
}
* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  min-height: 100vh;
  display:block;
  position: fixed;
  object-fit: cover;  
  z-index: -2;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-position-y: -24em;
  background-size: 100% 100%;
}

Also have some other styles for h-s, etc, but I suppose it's not the cause of the problem, so I removed is. JSX:

  return (
    <>
      <Navbar />
      <div className='header-div'>
        <h3 className='text-above'>
          -------   A HIKING GUIDE
        </h3>
        <div className='main-text'>
          Be Prepared For The Mountains And Beyond!
        </div>
      </div>
    </>
  );

Everything i tried is in the code, and i can't figure it out. Hope on your help

Solution

It's your background positioning, I commented it out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html {
        height: 100%; 
        width: 100%;
        display:block;
        position: fixed;
        object-fit: cover;  
        z-index: -2;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
        background-repeat: no-repeat;
        background-position: center top;
        /*background-position-y: -24em;*/
        background-size: 100% 100%;
                }
        * {
        margin: 0; padding: 0; box-sizing: border-box;
        }

    </style>
</head>
<body>
    
</body>
</html>