Hero code not filling full screen

[conceptofmind]

trafficstars

Describe the bug I am currently testing the Hero component from pro and it does not fit the entire screen.

To Reproduce I am using the first component from here: https://pro.magicui.design/docs/sections/hero

Expected behavior It should stretch the entire screen or be centered.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome

Additional context I am importing the component into page.tsx like:

import { Footer } from "@/components/sections/footer";
import { Hero } from "@/components/sections/hero";

export default function Home() {
  return (
    <main>
      <Hero />
      <Footer />
    </main>
  );
}

I am not posting the full component code since it is in pro.

Footer component aligns center perfectly.

[conceptofmind]

Would it make sense to just default these hero sections to:

      <div className="relative flex w-full flex-col items-center justify-start px-4 pt-32 sm:px-6 sm:pt-24 md:pt-32 lg:px-8">

[itsarghyadas]

Do you happen to have a public live link - like a deployed demo or staging environment - where I can check it out directly? That would make it much easier to troubleshoot or review.

[itsarghyadas]

Closing this as it’s a PRO components support query. Please use our support chat or email if you have any questions. Thank you.