items-center and justify-center not working in flexbox in Tailwind css?

Question

So I am facing an issue while designing a page. Actually, I have a flexbox with flex-direction as ROW, it has three children where each child is also a flexbox itselfbut I don't know why thefirst child is not aligning with the remaining child`. I had made a PINK border so as to understand it in the picture also.

Picture:

You can see that the first child flex containing 2 grandchildren is not aligned with the remaining children.

Code:

import React from "react";
import Header from "./components/Header";
import {
  AiFillGithub,
  AiFillInstagram,
  AiFillLinkedin,
  AiFillYoutube,
} from "react-icons/ai";
import { SiGmail, SiDevdotto, SiLichess } from "react-icons/si";

const Contact = () => {
  return (
    <>
      <div className="min-h-full">
        <Header />
        <div className="mx-auto shadow container">
          <div className="px-4 py-6 sm:px-0">
            <div className="mx-auto py-20 px-4 sm:px-6 lg:px-8">
              <h2 className="text-4xl md:text-6xl xl:text-7xl  leading-snug md:leading-snug xl:leading-relaxed w-full text-transparent bg-clip-text font-extrabold bg-gradient-to-r from-white to-sky-500/10 p-2 text-center">
                Let's Connect
              </h2>
            </div>
            <div className="flex flex-col xl:flex-row space-y-5 w-full md:p-20 md:w-6/12 xl:w-full m-auto xl:mx-5 items-center justify-center border-2 border-red-300">
              <div className="flex flex-row w-full border-2">
                <div className="p-2 md:p-3 lg:p-4 xl:p-5 2xl:p-6 bg-slate-900 rounded-lg m-auto border-2">
                  <a href="#" target="_blank" className="hover:text-teal-600 ">
                    <SiGmail className="h-14 w-14 md:h-24 md:w-24 lg:h-28 lg:w-28 xl:h-32 xl:w-32 " />
                  </a>
                </div>
                <div className="p-2 md:p-3 lg:p-4 xl:p-5 2xl:p-6 bg-slate-900 rounded-lg m-auto border-2">
                  <a href="https://www.youtube.com/channel/UCLDS5LaNHR6NEKYgQEPe9FA" target="_blank">
                    <AiFillYoutube className="h-14 w-14 md:h-24 md:w-24 lg:h-28 lg:w-28 xl:h-32 xl:w-32 " />
                  </a>
                </div>
              </div>
              <div className="flex flex-row w-full border-2">
                <div className="p-2 md:p-3 lg:p-4 xl:p-5 2xl:p-6 bg-slate-900 rounded-lg m-auto border-2">
                  <a href="#" target="_blank">
                    <AiFillGithub className="h-14 w-14 md:h-24 md:w-24 lg:h-28 lg:w-28 xl:h-32 xl:w-32 " />
                  </a>
                </div>
                <div className="p-2 md:p-3 lg:p-4 xl:p-5 2xl:p-6 bg-slate-900 rounded-lg m-auto border-2">
                  <a href="#" target="_blank">
                    <AiFillLinkedin className="h-14 w-14 md:h-24 md:w-24 lg:h-28 lg:w-28 xl:h-32 xl:w-32 " />
                  </a>
                </div>
              </div>
              <div className="flex flex-row w-full border-2">
                <div className="p-2 md:p-3 lg:p-4 xl:p-5 2xl:p-6 bg-slate-900 rounded-lg m-auto border-2">
                  <a href="#" target="_blank">
                    <SiDevdotto className="h-14 w-14 md:h-24 md:w-24 lg:h-28 lg:w-28 xl:h-32 xl:w-32 " />
                  </a>
                </div>
                <div className="p-2 md:p-3 lg:p-4 xl:p-5 2xl:p-6 bg-slate-900 rounded-lg m-auto border-2">
                  <a href="#" target="_blank">
                    <SiLichess className="h-14 w-14 md:h-24 md:w-24 lg:h-28 lg:w-28 xl:h-32 xl:w-32 " />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Contact;

You can remove the Header component if you want to try on your machine

Answer 1

You have use space-y-5 class in outer flex. You can check by remove this class and it works!!