修溢出，也保留已修好的部分，每一步都有依據。
第三份故障只在第一張卡片固定400px。最小修復後，用Git對照一項自己加入的無關CSS改動，僅回復該項，不清掉有效修正。
這關帶走：320px沒有水平溢出，未隱藏或刪除內容。
先學一招：每項修復與無關修改分開
320px沒有水平溢出，未隱藏或刪除內容。
帶上你的裝備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 03-fixed-card/樣式來源、320px元素寬度、自己的git diff
第三份故障只在第一張卡片固定400px。最小修復後，用Git對照一項自己加入的無關CSS改動，僅回復該項，不清掉有效修正。
一起拆解：修復與無關修改分開
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
本堂三故障分開；已修圖片與事件，再處理固定400px卡片。
保留：已驗證的圖片／事件修復
移除：本次400px故障區塊
回復：不相關的字型或色彩修改這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先對自己的diff分類，保留前兩個有效修復。
- 只修本故障造成的固定寬度，不以overflow:hidden掩蓋。
- 重驗圖片、事件及三尺寸，再交各故障的原因與最小差異。
正常應看到
三項各有重現與修復證據，沒有混入無關改版。
常見錯誤對照
整份檔案回復到未修版本，可能把已完成的兩項也丟掉。
先預測，再說明原因
打算回復CSS前，應先看哪份差異？
跟著觀察
- 先讀「修復與無關修改分開」的輸入，指出本關實際檔案或資料。
- 打算回復CSS前，應先看哪份差異？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
這是你的實際操作確認，小測不會替你勾選。
動手挑戰：修溢出，也保留已修好的部分
320px沒有水平溢出，未隱藏或刪除內容。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 03-fixed-card/樣式來源、320px元素寬度、自己的git diff
先記320px真正超寬元素；修後親手加入一項無關顏色改動，對照diff再只回復該項。
照這個順序開始
- 開03-fixed-card重現，請AI依Computed定位。
- AI只移除固定寬度注入，自己核對diff與無關改動。
- 回歸三頁、7卡片、搜尋分類、選單與鍵盤；三份問題單保持分開。
最小修復並規劃局部回復
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 03-fixed-card/樣式來源、320px元素寬度、自己的git diff
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- AI只移除固定寬度注入，自己核對diff與無關改動。
- 有效修復保留、無關改動局部回復，三份證據分開。
- 4．自己檢查結果
- 320px沒有水平溢出，未隱藏或刪除內容。
- 有效修復保留、無關改動局部回復，三份證據分開。
最小修復並規劃局部回復 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第14堂完整作品集（三頁、服務內容、案例、7筆JS作品、搜尋分類與手機選單）。提供三個獨立故障portfolio：一張圖片路徑錯、一次重複click、第一張卡片固定400px。start與各checkpoint為同一乾淨基準，分別供修完該故障比對；不是額外加新功能或學生已驗收。
本次任務：獨立03-fixed-card只有CSS末端第一張.work-card width:400px。依附實際寬度與規則來源，只移除L23 isolated fault區塊，保留原網格/文字/圖片，不用overflow:hidden、!important或縮字。再閱讀我附的有效修復與無關顏色修改diff，只指出該回復哪一個無關hunk及保留哪個修復；不要替我執行git restore/reset/commit。命令若需提供先說檔案範圍，由我逐條核對操作。列320/768/1280、搜尋分類、選單、圖片及三頁回歸，三故障各留問題單。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先找現象與證據
Computed指出固定寬度來源，不用全頁藏溢出。
線索 2｜再縮小修改範圍
Git只在自己的練習儲存庫，AI不替你操作。
回到自己的作品，逐項檢查
- 320px沒有水平溢出，未隱藏或刪除內容。
- 有效修復保留、無關改動局部回復，三份證據分開。
- 未實際完成的AI、發布或裝置驗收記待完成。
需要對照？看這一關的參考成果
先檢查自己的作品，再對照差異。開啟參考不會算完成。
查看本關靜態參考畫面（另開分頁）本堂是靜態作品除錯，不需要案件後端。下載本關完整參考後，依 OPEN_REFERENCE.html 啟動自己的預覽；不要覆蓋正常作品。
下載本關靜態參考包尚未完成可以先往下看，之後再回來補做。
保留依據與結果，再帶著作品往下走。
保留自己的修改差異與檢查結果。完成兩項操作確認再往下一關；也可以先閱讀，稍後補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 23 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 23 堂六步勾選，筆記、另一堂進度與網站檔案保留。