Unexpected behavior with Tailwindcss and Flexbox - html

Question

I've tried isolating an issue for a few hours to no avail. I think an image is worth more than a few words so let's start with that.
And the code.
<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
<div class="container mx-auto flex flex-col space-y-5 md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
</div>
</section>
As we can see, the first div inside the container has a weird position. I've tried removing a lot of classes, including padding and margin, but the first element stays in this position no matter what.
I really don't see what is my issue, so I kind of need extra pairs of eyes right now. Thanks.

Answer 1

Remove in in the container div this class space-y-5. And it would work like expected.
<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
<div class="container mx-auto flex flex-col md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
<div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
<div class="flex flex-col">
<p>test</p>
</div>
</div>
</div>
</section>