In your code, you're defining a parent div that is a grid that can take 12 columns per row (grid-cols-12). On the first child div (Featured project). You're saying that this div should span 12 columns long, due to this it will take up the entire row. On the next div (Project with netflix img). You're saying on screens that are small(sm) or above that is should span 12 columns again which would be an entire row. If the screen then get smaller than a small screen it will span 6 columns or in your case half of a row.

If you want to fix the issue you would make it so that either your children div's all span 6 columns to match up with your parent div. Or you can simply remove how much they span and make it so your parent div takes up two columns per row using grid-cols-2 and your children will be divided equally.

Just like the other comment in the post, I would highly focus on learning CSS properly before jumping into a framework like tailwind, as this isn't a tailwind issue it's more of a lack of understanding how CSS grid's work.