讓導覽連結橫向排列
修改檔案：style.css
完成後看見：三個導覽連結排成同一列
第 05 章交棒
Hero 已經可讀，現在把入口排成導覽隊伍
上一章已完成背景、文字與 CTA 的可讀性；本章只新增共同父層、主軸與間距，讓入口與介紹內容站成清楚的隊伍。
ABOUT ME
我把想法整理成容易使用的畫面
目前練習 HTML 與 CSS，並持續把每堂成果合回作品集。
作品
這裡會整理已完成的網站作品。
聯絡
聯絡方式將在後續章節補上。
CHAPTER 06 · PRACTICE WORKSPACE
Flex 入門：導覽列與左右兩欄
完成橫向導覽列與左右排列介紹區
03
Checkpoint 2
2/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
分開品牌與選單
修改檔案：style.css
完成後看見：品牌靠左、選單靠右
建立介紹區左右兩欄
修改檔案：style.css
完成後看見：圖像與文字並排且有間距
WORKSPACE
本階段實作區
已完成 TASK-02；先核對可見結果，再前往 TASK-03。
FOCUS TASK · TASK-03
現在只處理：建立介紹區左右兩欄
講解時展開：2 個小型比較
父容器 vs 子項目｜兩欄由誰建立
比較：左右兩欄的排列責任在共同父層，圖片與文字只負責自己的內容。
現在做：在 Checkpoint 2 的 DevTools 先只對 .about-layout__content 加 display: flex，觀察它只會排列自己的內部內容；移除後改對共同父層 .about-layout 加 display: flex，確認圖像與文字才會成為兩個並排 items，最後把父層規則寫回 style.css。
看預期與證據
預期：能用前後畫面指出只有共同父層 .about-layout 能建立圖像與文字的兩欄，子項目本身不能替父層排列兄弟元素。
證據：前後截圖或口述同時標示 .about-layout 與 .about-layout__content 的 computed display，並說明哪一個選擇真的改變兩欄排列。
gap vs margin｜欄間距集中管理
比較：gap 直接描述 Flex／Grid 子項目之間的距離，適合維持整組欄位一致。
現在做：在 DevTools 先讓 .about-layout 使用 display: flex，加入 gap: 40px 並記錄欄間距；移除 gap，改在 .about-layout__content 加 margin-left: 40px，比較兩欄距離與責任位置；最後移除 margin，只把 gap: 40px 寫回 style.css。
看預期與證據
預期：能看見 gap 集中描述 Flex items 的共同間距，margin 只附著在單一子項目；能說明本任務用 gap 維持欄間距的理由。
證據：連續截圖或口述比較 gap 與 margin-left 的結果，並展示 style.css 最後保留 .about-layout 的 gap: 40px。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在 Checkpoint 2 確認品牌靠左、選單靠右且垂直置中，再查看介紹圖像與文字仍上下堆疊。
- B｜預測：把視窗拉到桌機寬度，確認圖像與文字並排且有間距。
- C｜實作：在 style.css 的 .about-layout 完成「建立介紹區左右兩欄」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 .about-layout 與 style.css，最後重跑原操作。
- E｜驗收：圖像與文字並排且有間距
完成條件：DONE-03：圖像與文字並排且有間距
CONTINUE
繼續完成 TASK-03
前往 Solution，依要求完成「建立介紹區左右兩欄」。