I am struggling to format divs using flexbox. The justify-content and align-items properties do not seem to be working as expected in my code. I have two flex column divs, but applying these properties has no effect. Below is the code snippet that I am currently working with, using Tailwind CSS and React.
The HTML structure consists of a main div that spans the width of the screen. Inside this div, there are two child divs. The first one is positioned absolutely and serves as a background for the left half of the parent div. The second child div is placed in the foreground and contains text and image content with padding on the sides. My goal is to apply flex properties to these child divs.
{/* container */}
<div className="w-screen relative mb-10">
// Background shape div to give color background to the left half
<div
id="backgroundShape"
className="w-1/2 bg-grey-400 absolute h-full -z-20"
></div>
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// Left half of content
<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
<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 background div with id="backgroundShape" uses clip-path property to create a unique shape. Although I think this is not related to my current issue, I wanted to include the style information here for reference.
#backgroundShape {
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}
If any clarification is needed, feel free to leave a comment. Any assistance on this matter would be greatly appreciated. Thank you!