div 在调整大小时一直向左移动

Question

我正在尝试使用 NextJS 和 tailwindcss 创建一个网站。但是每当调整浏览器窗口的大小时，div 都会向左移动。

这是调整大小时的样子，但文本应该居中

这是它在桌面上的外观

import { IoIosArrowForward } from "react-icons/io";
import Link from "next/link";

const About = () => {
  return (
    <div className="font-inter py-4 my-16 flex justify-center items-center flex-col"
      id="about">
      <p className="text-6xl font-bold text-gray-700 text-center">
        Hey, I&apos;m Anurag
      </p>
      <p className="text-2xl text-gray-600 text-center my-8">
        Hey there, I&apos;m a Frontend Developer based in India. <br />
        I&apos;m mainly focused on Frontend Development, and I also write blogs
        and design sometimes. <br />
        Apart from coding, I love listening to music!
      </p>
      <p className="flex justify-center">
        <Link href="https://github.com/kr-anurag" passHref>
          <a className="text-xl w-72 text-white font-medium px-4 py-3 rounded-full flex items-center justify-center bg-gradient-to-r from-[#12c2e9] via-[#c471ed] to-[#f64f59] shadow-xl hover:bg-gradient-to-l duration-100"
            aria-label="github-account"
            target="blank">
            Checkout my Github
            <IoIosArrowForward />
          </a>
        </Link>
      </p>
    </div>
  );
};

export default About;

Answer 1

通过添加一个顺风类可以解决问题。
将w-full 添加到 #about div。 Here，是您的代码示例。请检查一下。

有效！