使用Tailwind CSS建站时页面内容超出屏幕宽度，如何解决？

根据你提供的代码，问题出在几个具体元素的样式设置上，以下是针对性的修复方案：

1. 修复导航栏的宽度溢出 #

你的导航栏使用了absolute定位 + w-full + 左右margin，这会让导航栏实际宽度超出屏幕（w-full是100%视口宽度，加上左右margin后总宽度超过视口）：

<!-- 原导航栏代码 -->
<nav class="px-6 md:px-12 py-1.5 md:py-2.5 bg-yellow-400 m-3 md:m-5 rounded-xl shadow-md shadow-sky-600 flex absolute z-50 top-0 right-0 left-0 w-full">

修复方案：
去掉w-full和left-0 right-0 m-3 md:m-5，改用inset-x-3 md:inset-x-5来控制左右位置，让导航栏自动适配视口宽度，同时实现原有的margin效果：

<nav class="px-6 md:px-12 py-1.5 md:py-2.5 bg-yellow-400 rounded-xl shadow-md shadow-sky-600 flex absolute z-50 top-0 inset-x-3 md:inset-x-5">

2. 修复图片容器的右侧偏移溢出 #

页面右侧的图片容器设置了-right-14负边距，这个设置会让元素直接超出屏幕右侧，触发横向滚动：

<!-- 原图片容器代码 -->
<div class="md:mr-24 absolute md:relative -top-24 sm:-top-28 md:top-0 -right-14 w-[50%] sm:w-[40%] md:w-[30%]">

修复方案：
移除-right-14，如果需要调整图片位置，改用transform translate-x-*类或者调整父容器的padding，避免元素超出视口范围：

<div class="md:mr-24 absolute md:relative -top-24 sm:-top-28 md:top-0 w-[50%] sm:w-[40%] md:w-[30%]">

3. 补充确认全局样式 #

Tailwind默认已经全局设置了box-sizing: border-box，但可以检查你的自定义CSS文件（main.css/style.css）是否覆盖了这个规则，确保全局样式包含：

* {
  box-sizing: border-box;
}

额外优化建议 #

• 保留body上的overflow-x-hidden作为最后防线，但优先修复元素本身的溢出问题，避免依赖隐藏滚动条掩盖布局缺陷。
• 对于绝对定位元素，优先使用inset系列类（如inset-x-*）控制位置，避免手动设置left/right加w-full导致的宽度溢出。

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