Unexpected behavior with Tailwindcss and Flexbox

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>