前言
身为助教在批改同学的切版相关作业时，最常遇到响应式网站写着写着就出现 x 轴，这样的问题看似没有头绪要怎么解决，实际上解法非常的简单。
响应式网页内的内容像水一样，顺应着浏览器的尺寸自动填装，只要内容挤破容器就会产生 x 轴，因此解决方法无疑就是「找出网页中超出浏览器宽度的元素」。
这是大多数人困惑的地方「知道问题点，但是不知道怎么下手 🥺」。
解法一：排除法
按下 F12 按钮打开浏览器的开发者工具，并且用左上角的「挑选页面中的元素按钮」一个一个选取网页中的元素并删除，直到删到挤出浏览器的片段 x 轴自然会消失，你就知道是哪个片段的元素破版了，暴力但有用。
解法二：外框法
既然只是要知道破版的元件为何，可以在任何元素周围添加外框线辅助了解目前页面的结构，再检查是哪一个元素冲到了画面最右边即可。
* { outline: 1px solid red;}解法三：藏起来法
如果真的不想在网页中看到 x 轴，只要对 html 元素设定 overflow-x: hidden 即可。
總結
找到破版的元素之后就可以慢慢检视是哪一段 CSS 导致破版，通常会出现破版的问题是因为……
- 写死大小的宽 (视情况善用
max-width而非width) - 不知道
border也算在元素的实际尺寸内 - 使用动画
可能的问题很多，但肯定的是只要你够熟悉 CSS，这些问题都能轻松迎面而解。写网页的时候不小心让元素破版是常见的事，有一定经验后这样切版的问题会越来越少出现，因为坑都被踩透啦～