I'm making my portfolio website with Reactjs + tailwind and i have a problem in components in the page

the footer always displays on the other elements in responsive

for example :

Here is the Footer Component

import React from "react";
import { FaLinkedin } from "react-icons/fa";
import { SiGmail } from "react-icons/si";
import { VscGithub } from "react-icons/vsc";

export default function Footer() {
  return (
    <footer className="pt-9">
        <div className="flex flex-col m-auto justify-between w-[192px] h-[102px]">
          <div className="flex justify-between">
            <a target="_blank" href="https://github.com/Ali-Eldeba">
              <VscGithub className="cursor-pointer text-[2rem] text-[#333] transition ease-in-out hover:scale-125 hover:rotate-[10deg] dark:text-white" />
            </a>
            <a target="_blank" href="https://www.linkedin.com/in/alieldeba/">
              <FaLinkedin className="cursor-pointer text-[2rem] text-[#0077b5] transition ease-in-out hover:scale-125 hover:rotate-[5deg]" />
            </a>
            <a target="_blank" href="mailto:alieldeba375@gmail.com">
              <SiGmail className="cursor-pointer text-[2rem] text-red-500 transition ease-in-out hover:scale-125 hover:rotate-[5deg]" />
            </a>
          </div>
        </div>
        <p className="text-center dark:text-white mt-[-3rem]">
          Made with <span className="text-red-500">❤</span> by alieldeba &copy;
          {new Date().getFullYear()}
        </p>
    </footer>
  );
}