NextJS+TailwindCSS下CV页面主体偏移，移除mx-auto后恢复一致

问题描述 #

• 现有三个页面：首页（home）、简历页（cv）、关于页（about）
• 简历页主体内容轻微向左偏移，与另外两页显示不一致
• 页面像素宽度数值一致，但无法定位具体差异点

关键现象 #

移除layout.tsx中的mx-auto类后，所有页面布局恢复一致，宽度问题解决。

怀疑方向 #

推测是某个组件导致布局异常，但暂未定位具体原因。

问题截图 #

![问题截图]

文件夹结构 #

![文件夹结构截图]

相关代码 #

layout.tsx #

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased min-h-screen min-w-fit flex flex-col items-center`}>
        <main className="w-full pt-10 pb-80 px-8">
          <div className="max-w-[820px] mx-auto">
            <NavBar />
            {children}
          </div>
        </main>
      </body>
    </html>
  );
}

experience.tsx #

// experience.tsx
import { Skill, SkillProps, skillsDirectory } from "../icons/skill";

type ExperienceProps = {
  jobTitle: string;
  company: string;
  period: string;
  content: string | string[];
  skills?: (keyof typeof skillsDirectory)[];
}

export function Experience({jobTitle, company, period, content, skills}: ExperienceProps) {
  const renderContent = () => {
    if (Array.isArray(content)) {
      return (
        <ul className="list-disc list-inside font-light my-4">
          {content.map((item, index) => (
            <li 
              className="" 
              key={index}>
                {item}
            </li>
          ))}
        </ul>
      );
    } else {
      return <p className="font-light">{content}</p>
    }
  }
  return (
    <div className="flex flex-col md:flex-row mt-4">
      <div className="w-1/4 pt-1.5">
        <h4 className="font-light">{period}</h4>  
      </div>
      <div className="w-3/4 pt-1 px-4 rounded-xl transition-all duration-75 hover:bg-inherit hover:shadow-md ">
        <h4 className="text-lg font-light text-slate-900">{jobTitle}</h4>
        <h4 className="text-md font-thin italic text-slate-400">@ {company}</h4>
        {renderContent()}
        <div className="flex flex-wrap gap-2 mb-4">
          {skills?.map((skillKey) => (
            <Skill key={skillKey} {...skillsDirectory[skillKey]} />
          ))}
        </div>
      </div>
    </div>
  );
}

summary.tsx #

// summary.tsx
import { Skill, skillsDirectory } from "../icons/skill"
import { FaStar } from "react-icons/fa";
import { Subtitle } from "./subtitle";

const summaryWidth = 40
const summaryHeight = 40

const SkillCategory = (
  {stars, title, skills, width=summaryWidth, height=summaryHeight}: 
  {stars: number, title: string, skills: string[], width?: number, height?: number}
) => (
  <div className="flex-grow">
    <div className="flex flex-row">
      <div className="flex pt-1">
        {[...Array(stars)].map((_, i) => (
          <FaStar key={i} className="hover:text-yellow-800 transition-all duration-600" />
        ))}
      </div>
      <h3 className="ml-2">{title}</h3>
    </div>
    <div className="flex flex-wrap gap-2">
      {skills.map((skillKey: string) => (
        <Skill key={skillKey} {...skillsDirectory[skillKey]} width={width} height={height} />
      ))}
    </div>
  </div>
)

export function Summary() {
  const threeStars = ["python", "pytorch", "lightning", "docker", "fastapi"]
  const twoStars = ["java", "springboot", "django", "flask"]
  const oneStar = ["typescript", "nextjs", "tailwindcss"]

  return <>
    <Subtitle subtitle="Summary"/>
    <div className="flex flex-wrap gap-2">
      <SkillCategory stars={3} title="Professionally, frequently" skills={threeStars} />
      <SkillCategory stars={2} title="Professionally, Occationally" skills={twoStars} />
      <SkillCategory stars={1} title="Personally developed" skills={oneStar} />
    </div>
  </>
}

内容的提问来源于stack exchange，提问作者djmoon13