TailwindCSS – content larger than screen when adding components

I am in the progress of learning React and TailwindCSS. I am currently trying to build a simple portfolio with a front page and a nav bar for some other pages. I have created the skeleton for my front page, but when I add the nav bar (header) the content gets larger then the screen in both height and width which adds whitespace in the bottom and to the right.

I’ve tried messing around with the h-screen/w-screen and h-full/w-full tags, but I am unable to make anything work.

My App.js looks like this:

import React from "react";
import About from "./components/About";
import Navbar from "./components/Navbar";

export default function App() {
  return (
    <main className="m-0 w-screen h-screen bg-gray-50 body-font text-gray-600 font-display">
      {/* <Navbar /> <-- Adding this causes the issue */}
      <About />
    </main>
  );
}

My Navbar.js component looks like this:

import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-50 md:sticky top-0 z-10">
      <div className="container mx-auto flex p-5 flex-col items-end">
        <nav className="md:mr-4 md:py-1 md:pl-4 flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-blue-500">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-blue-500">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-blue-500">
            Testimonials
          </a>
        </nav>
      </div>
    </header>
  );
}

And my frontpage (About.js) looks like this:

import React from "react";

export default function About() {
    return (
      <section id="about" className="h-full w-full">
        <div className="container h-full w-full mx-auto my-auto flex px-10 py-20 md:flex-row flex-col items-center">
          <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
            <h1 className="title-font sm:text-5xl text-4xl mb-4 font-extrabold text-blue-500">
              NAME HERE
            </h1>
            <p className="mb-8 leading-relaxed">
              Developer
            </p>
            <div className="flex flex-col justify-center">
              <a href="mailto:[email protected]">[email protected]</a>
            </div>
          </div>
        </div>
      </section>
    );
  }

All help is appreciated, thanks!