Justify content and align items not working in flexbox - html

Question

I am trying to format some divs using flex box. However, justify content or align items properties are not working and I can't figure out why. In 2 flex column divs, I have tried to use the mentioned properties but they have had no effect. I have put the code below. I am using tailwind and react.
The HTML is basically displaying one div whose width is the screen size. Inside the div, there are two divs. The first is an absolute div that is just there to provide a special background to the left half of the parent div. The second div is in the foreground and has some padding on the sides so it is in line with the page style. It has two divs in it that occupy the left and right half. I want to apply flex properties to the child divs here.
{/* container */}
<div className="w-screen relative mb-10">
// background div that provides a colour background to only the left half of the parent div
<div
id="backgroundShape"
className="w-1/2 bg-grey-400 absolute h-full -z-20"
></div>
// div that holds the actual text and image content for the foreground
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// left half of content, this gets displayed over the background div
<div className="w-1/2 flex-col justify-center pr-20 ">
<div>
Heading 1
</div>
<div className="text-4xl">
Heading 2
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-x-6 gap-y-3">
<div>
<FaScroll className="" />
<h3 className="text-lg">
Subheader
</h3>
<p className="text-sm">
Description
</p>
</div>
</div>
</div>
// right half of content displaying two images in a column
<div className="w-1/2 flex-col pl-10 justify-center">
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
</div>
</div>
</div>
The id="backgroundShape" uses a clip-path property to give the background a special shape. I think it is irrelevant to my issue but I have included the style.
#backgroundShape {
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}
If I can clarify anything please do comment. Would appreciate any help with this, thanks!

Answer 1

the items-center and justify-center because you didn't add the flex class to the child divs, the only change you need to do is this:
// div that holds the actual text and image content for the foreground
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// left half of content, this gets displayed over the background div
<div className="w-1/2 flex flex-col justify-center pr-20 ">
<div>
Heading 1
</div>
<div className="text-4xl">
Heading 2
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-x-6 gap-y-3">
<div>
<FaScroll className="" />
<h3 className="text-lg">
Subheader
</h3>
<p className="text-sm">
Description
</p>
</div>
</div>
</div>
// right half of content displaying two images in a column
<div className="w-1/2 flex flex-col pl-10 justify-center">
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
</div>
</div>