Как исправить высоту и ширину веб-сайта на мобильном телефоне в React JS?

Я новичок в React JS и написал простой веб-сайт, который нормально выглядит в веб-браузере, однако мой внешний вид на мобильных устройствах очень неудовлетворительный. По какой-то причине высота на мобильном устройстве в два раза больше, и я вижу огромную полосу прокрутки, которая а. Мне не нужно и б. там нет контента, поэтому не знаю, почему он показывается.

Вот мой CSS:

.App {
  display: flex;
  min-width:  768px;
  height: 100%;
  min-height: 100vh;
  background-color: #cbe6ef;
  flex-direction: column;

  @media only screen and (min-width : 768px) {
   width: 50%;
   height: 50vh;
 }

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {
   width: 100%;
 }
}

Мой App.js:

function App() {

  return (
      <Routes>
        <Route path = "/" element = {<Home />} />
        <Route path = "testing" element = {<BetaTesting />} />
      </Routes>
  );
}

И мой главный экран:

const Home = () => {
    const mystyle = {
    backgroundImage: "url(/background.png)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat"

  }

    const [cookies, setCookie] = useCookies(['viewed_cookie_policy']);
    return (
    <div style = { mystyle } className = "App">
      <Header />
      <News />
            <Footer />
            {!cookies.viewed_cookie_policy ? <Consent /> : null}
    </div>
    );
};

Вот как это выглядит на мобильном телефоне:

Если кто-то скажет мне, что я делаю неправильно, будет здорово!