Tailwind: container breakpoint cutting off background image

I want to put a contain around my page so that on very large screens the content stays in the middle of the screen.

But I have a background image i want to still show over the container. Does anyone know how I would achieve this?

export const PreviewScreen: React.FC = () => {
  return (
    <div className="sm:ml-0 xl:container xl:mx-auto">
      <div className="text-mainText font-Montserrat">
        <PreviewPageNav />
        <div className="ml-2">
          <div className="ml-36 h-14">
            <div className="bg-landing-background bg-no-repeat bg-14 bg-center-2 h-14 bg-center-2">
              <p className="text-5xl font-Montserrat">
                One workspace <br /> Every team
              </p>
            </div>
          </div>
          {/* <PackageCards /> */}
          {/* <StoreContact /> */}
        </div>
      </div>
    </div>
  );
};

I want the image to go to the edge of the screen and not get cut off.