How do I fix website height and width on mobile in react js?

I am new to React JS, and I wrote a simple website, that looks OK on a web browser, however, my mobile appearance is very off. For some reason, the height on mobile is twice as big, and I see a huge scrollbar, which a. I don’t need and b. there’s no content the, so don’t know why it is showing.

Here is my 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%;
 }
}

My App.js:

function App() {

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

And my Home screen:

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>
    );
};

This is how it looks on mobile:

If someone can tell me what I am doing wrong will be great!