Why are my screen sizes affecting my footer?

I am using Next.js and tailwindcss and have been sitting here for an hour trying to figure out what the issue is (finally becoming a programmer). In my tailwind config.js file I have some screen sizes under theme and extend. For some reason, the md and xl screen sizes only are affecting my footer, causing my footer to become uncentered. Does anyone know why this is happening?

Also, I imported the footer.js code into _app.js where it is then applied to all of my pages.

tailwind.config.js screen sizes code snippet:

 screens: {
        "2xl": { max: "1535px" },
        // => @media (max-width: 1535px) { ... }
    
        xl: { max: "1279px" },
        // => @media (max-width: 1279px) { ... }
    
        lg: { max: "1023px" },
        // => @media (max-width: 1023px) { ... }
    
        md: { max: "767px" },
        // => @media (max-width: 767px) { ... }
    
        sm: { max: "639px" },
        // => @media (max-width: 639px) { ... }
    
        xs: { max: "479px" },
        // => @media (max-width: 479px) { ... }
    },

Footer.js code:

import { useState, useEffect } from "react";
import Layout from "./Layout";
import Link from "next/link";
import { useRouter } from "next/router";
import { motion } from "framer-motion";

const CustomLink = ({ href, title, className = "", target }) => {
  const router = useRouter();
  return (
    <motion.a
      href={href}
      target={target}
      whileTap={{ scale: 0.9 }}
      className={`${className} relative group inline-block`}
    >
      {title}
      <span
        className={`h-[1px] inline-block bg-white
                absolute left-0 -bottom-0.5
                group-hover:w-full transition-[width] ease duration-300
                ${router.asPath === href ? "w-full" : "w-0"}
                `}
      >
        &nbsp;
      </span>
    </motion.a>
  );
};

const Footer = () => {
  const [isVisible, setIsVisible] = useState(false);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const toggleVisibility = () => {
    if (window.scrollY > 0.1) {
      // Change 300 to any value you want
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", toggleVisibility);
    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

  return (
    <footer className="relative w-full border-t-2 border-solid border-dark font-medium text-lg bg-gray-900 text-white">
      <div className="max-w-screen-xl mx-auto py-12 grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
        <div className="md:col-span-2 flex flex-col items-center md:items-start text-center md:text-left">
          <h3 className="text-2xl font-bold mb-6">About Me</h3>
          <p className="text-lg mb-6">
            Lorem ipsum odor amet, consectetuer adipiscing elit. Sed elementum phasellus aliquet, lectus netus mauris. Sapien ac nisl eu euismod tincidunt gravida. Mollis natoque posuere convallis lacinia ligula est molestie. Per nisl ornare; nisl ultrices urna mi. Tristique aptent placerat hendrerit quis eget porta litora. Hac nibh suscipit fusce bibendum primis curae duis ut. Sapien habitant class donec potenti aenean. Cursus metus integer porta vulputate in; est enim. Velit laoreet eros quis dis finibus.
          </p>
          <span className="text-lg">
            Copyright &copy; {new Date().getFullYear()} In the Lens of the
            Public. All rights reserved.
          </span>
        </div>

        <div className="flex flex-col items-center">
          <h3 className="text-2xl font-bold mb-6">Site Links</h3>
          <ul className="space-y-3 text-lg">
            <li>
              <CustomLink
                href="/"
                title="Home"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="/about"
                title="About"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="/projects"
                title="Projects"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="/resume"
                title="Resume"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="/contact"
                title="Contact"
                className="hover:text-gray-400"
              />
            </li>
          </ul>
        </div>

        <div className="flex flex-col items-center">
          <h3 className="text-2xl font-bold mb-6">Contact</h3>
          <ul className="space-y-3 text-lg">
            <li>
              <CustomLink
                href="https://www.instagram.com/"
                title="Instagram"
                target="_blank"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="https://x.com/"
                title="X"
                target="_blank"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="https://www.linkedin.com/"
                title="LinkedIn"
                target="_blank"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="https://github.com/"
                title="GitHub"
                target="_blank"
                className="hover:text-gray-400"
              />
            </li>
            <li>
              <CustomLink
                href="mailto:[email protected]"
                title="Email"
                target="_blank"
                className="hover:text-gray-400"
              />
            </li>
          </ul>
        </div>
        <div className="col-span-4 mt-8 flex items-center justify-center">
          <CustomLink
            href="/privacy"
            title="Privacy Policy"
            className="hover:text-gray-400"
          />
          <span className="mx-2">|</span>
          <CustomLink
            href="/terms"
            title="Terms of Service"
            className="hover:text-gray-400"
          />
        </div>
      </div>
      <button
        onClick={scrollToTop}
        className={`fixed bottom-8 right-8 p-3 rounded-full bg-gray-700 text-white shadow-lg hover:bg-gray-600 transform transition-transform duration-300 ${
          isVisible ? "translate-y-0 opacity-100" : "translate-y-20 opacity-0"
        }`}
        aria-label="Scroll to top"
        style={{ transitionProperty: "transform, opacity" }} // Added to ensure both transform and opacity transition together
      >
        ↑
      </button>
    </footer>
  );
};

export default Footer;

I’ve tried rewriting the screen sizes and changing where my footer is located within my file and changing the contents of my footer but nothing is working.