I wanted to understand how can i “step out” of the grid layout.
I want the beige color to take the entire width of the screen

I tried to separate the component from the section yet it doesn’t seem to work.

MainContent.jsx:

import AboutMe from "./AboutMe";

const MainContent = () => {
  return (
    <div className="col-span-6">
      <div>Main Content</div>
      <div className="mt-4">
        <img
          className="rounded-lg"
          src="/src/assets/images/hero/videoframe_3427.png"
          alt="Video Frame"
        />
        <h1 className="text-8xl mt-10">hello everyone</h1>
        <h2 className="text-5xl mt-20">Cosmetics</h2>
      </div>
      <div className="pt-20">
        <IconSection />
        <AboutMe />
      </div>
    </div>
  );
};

export default MainContent;

IconSection.jsx:

const IconSection = () => {
  return (
    <div className="w-full bg-beige py-8">
      <div className="grid grid-cols-3 gap-4 mt-4 max-w-4xl mx-auto">
        <div className="flex justify-center items-center flex-col">
          <SocialIcon url="www.facebook.com" />
          <span>Facebook</span>
        </div>
        <div className="flex justify-center items-center flex-col">
          <SocialIcon url="email" />
          <span>Email</span>
        </div>
        <div className="flex justify-center items-center flex-col">
          <SocialIcon url="whats" />
          <span>Phone</span>
        </div>
        <div className="flex justify-center items-center flex-col">
          <SocialIcon url="whatsapp" />
          <span>WhatsApp</span>
        </div>
        <div className="flex justify-center items-center flex-col">
          <SocialIcon url="tiktok" />
          <span>TikTok</span>
        </div>
        <div className="flex justify-center items-center flex-col">
          <SocialIcon url="instagram" />
          <span>Instagram</span>
        </div>
      </div>
    </div>
  );
};

export default IconSection;

I added a picture: