前言
身為助教在批改同學的切版相關作業時問題最常遇到響應式網站寫著寫著就出現 x 軸，這樣的問題看似沒有頭緒要怎麼解決，實際上解法非常的簡單。
響應式網頁內的內容像水一樣，順應著瀏覽器的尺寸(容器)自動填裝，只要內容擠破容器就會產生 x 軸，因此解決方法無疑就是「找出網頁中超出瀏覽器寬度的元素」。
這是大多數人困惑的地方「知道問題點，但是不知道怎麼下手 🥺」。
解法一：排除法
按下 F12 按鈕打開瀏覽器的開發者工具，並且用左上角的「挑選頁面中的元素按鈕」一個一個選取網頁中的元素並刪除，直到刪到擠出瀏覽器的片段 x 軸自然會消失，你就知道是哪個片段的元素破版了，暴力但有用。
解法二：外框法
既然只是要知道破版的元件為何，可以在任何元素周圍添加外框線輔助了解目前頁面的結構，再檢查是哪一個元素衝到了畫面最右邊即可。
* { outline: 1px solid red;}解法三：藏起來法
如果真的不想在網頁中看到 x 軸，只要對 html 元素設定 overflow-x: hidden 即可，
總結
找到破版的元素之後就可以慢慢檢視是哪一段 CSS 導致破版，通常會出現破版的問題是因為……
- 寫死大小的寬 (視情況善用
max-width而非width) - 不知道
border也算在元素的實際尺寸內 - 使用動畫
可能的問題很多，但肯定的是只要你夠熟悉 CSS，這些問題都能輕鬆迎面而解。寫網頁的時候不小心讓元素破版是常見的事，有一定經驗後這樣切版的問題會越來越少出現，因為坑都被踩透啦～