讓導覽連結橫向排列
修改檔案：style.css
完成後看見：三個導覽連結排成同一列
第 05 章交棒
Hero 已經可讀，現在把入口排成導覽隊伍
上一章已完成背景、文字與 CTA 的可讀性；本章只新增共同父層、主軸與間距，讓入口與介紹內容站成清楚的隊伍。
ABOUT ME
我把想法整理成容易使用的畫面
目前練習 HTML 與 CSS，並持續把每堂成果合回作品集。
作品
這裡會整理已完成的網站作品。
聯絡
聯絡方式將在後續章節補上。
CHAPTER 06 · PRACTICE WORKSPACE
Flex 入門：導覽列與左右兩欄
完成橫向導覽列與左右排列介紹區
02
Checkpoint 1
1/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
分開品牌與選單
修改檔案：style.css
完成後看見：品牌靠左、選單靠右
建立介紹區左右兩欄
修改檔案：style.css
完成後看見：圖像與文字並排且有間距
WORKSPACE
本階段實作區
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
現在只處理：分開品牌與選單
講解時展開：2 個小型比較
justify-content vs margin-left:auto｜主軸分配方式
比較：justify-content 分配整個 Flex 容器的空間，auto margin 只把某個項目推向一側；適用情境不同。
現在做：在 Checkpoint 1 的 DevTools 先暫時補上 display: flex，先比較 .practice-nav 的 justify-content: space-between；再移除它，改在 .practice-nav__links 暫時加入 margin-left: auto，觀察兩種做法如何都把選單推向右側；最後移除實驗用 margin，保留標準答案的 justify-content。
看預期與證據
預期：能看見兩種做法都能把選單推向右側，但 justify-content 分配整個容器的空間，auto margin 只把單一項目推向一側；能說出本任務選用前者的原因。
證據：前後截圖或口述同時指出 .practice-nav 的 computed display、justify-content，以及實驗後移除的 .practice-nav__links margin-left。
align-items vs padding｜對齊與內距
比較：align-items 控制子項目在交叉軸的位置，padding 控制容器內邊界距離。
現在做：在 Checkpoint 1 的 DevTools 暫時替 .practice-nav 加上 min-height: 120px 與 display: flex，切換 align-items: flex-start 和 center，觀察品牌與選單在容器內的垂直落點；再只增加 padding-top，區分對齊與邊界距離，最後移除 min-height 與實驗值，寫回 align-items: center。
看預期與證據
預期：能分辨 align-items 改變子項目在交叉軸的落點，padding 改變容器內邊界距離；能說明最後的導覽列只保留必要的 align-items。
證據：連續截圖或口述包含 min-height: 120px 的對照、align-items 兩種狀態與 padding 變化，並展示最後 style.css 的標準宣告。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在 Checkpoint 1 確認三個連結已同列並有 20px gap，但品牌與整組選單仍沒有分居導覽列左右。
- B｜預測：把視窗拉寬，確認品牌靠左、選單靠右且中間有彈性空間。
- C｜實作：在 style.css 的 .practice-nav 完成「分開品牌與選單」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 .practice-nav 與 style.css，最後重跑原操作。
- E｜驗收：品牌靠左、選單靠右
完成條件：DONE-02：品牌靠左、選單靠右
CONTINUE
繼續完成 TASK-02
前往 Checkpoint 2，依要求完成「分開品牌與選單」。