Hello, my home page below 450 pixels wide or so begins accumulating margin or space slowly on the right side. Above this the content is all centered but then around this width and below it pushes all the content to the left and it gets very narrow.

My website is public as I'm using vercel, however I will supply the necesarry components involved in this webpage, you can see the web page yourself publically, or you can clone my repo which i will also supply.

I have tried everything I could think of for about 2 days now and can not solve where this mystery padding/margin is coming from and it's making my website home page completely trash on home page.

Link to public website: https://farmers-market-finds.raymiesegars.com/
Link to my repo: https://github.com/raymiesegars/farmers-market-finds

Code snippets that likely contain the issue

I can't post more than this here but all code can be found in the latest commit of the master branch in the repo

Home /page.tsx

import HomePage from "@/components/home-page/HomePage";

export default function Home() {
  return (
    <main className="pl-4 pr-4 pt-6 pb-6 sm:pl-6 sm:pr-6 md:pl-16 md:pr-16">
      <HomePage />
    </main>
  );
}

HomePage.tsx

import Hero from "./Hero";
import Features from "./Features";
import ForYouSection from "./ForYouSection";
import ForVendorsSection from "./ForVendorsSection";

export default function HomePage() {
  return (
    <div className="w-full">
      <Hero />

      <div className="w-full">
        <ForYouSection />
      </div>

      <div className="min-h-screen w-full">
        <Features />
      </div>

      <div className="min-h-screen w-full">
        <ForVendorsSection />
      </div>
    </div>
  );
}