通常網頁的主要內容都會放在 container 裡，為了讓視覺瀏覽可以專注在網頁中心。
> 設計稿外層 1920px 為瀏覽器邊界示意，並非整體 body、容器的寬度
> 

### 觀看 container 的範圍
1. 點選設計稿右側的 Main menu > View > Layout grids 可開關布局網格。

2. 可以觀看到被粉紅色區塊覆蓋的部分就是 container 的範圍

### 計算 container 的寬度
以第二週設計稿為例

**計算方式一：**
<img src="https://imgur.com/iXLNcL5.png" width="700px">

總共有 12 列（紅色區塊）x 一列 86px + 11 個間隔 x 一個間隔寬為 24px = **1296px**

>此設計稿的 Guildeline 也有提供此圖片供各位參考。

>要開啟這個視窗較為複雜，
>1.需要將設計稿新增至自己的草稿(如下圖)後
>
>
>2.點擊左方的 1920*1080 的部分選取全區塊
>
>
>3.點擊右方的 Layout grid 區塊，即可找到該資訊
>

**計算方式二：**
用設計稿邊界 1920px 減去兩側邊距 312px


1920px - 312px*2 = **1296px**

### 容器實際運用
設定 .container 寬度並搭配 `margin: 0 auto;` 讓整體內容可以放在畫面中間，水平置中

### 題目
嘗試實作完成第二週設計稿 footer 區塊，請複製此 [Codepen](https://codepen.io/jmimiding4104/pen/KKrwxZL)，補上 `...` 的部分
> 容器寬度為第二週設計稿的容器寬度

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/jmimiding4104/pen/bGQNxPJ
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-:|:----------------:|:--------------------------------------------------------------:|
| 01 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/MWzGXPv)|
| 02 |Moreene|[CodePen](https://codepen.io/Moreene/pen/BaGxVVN)|
| 03 |Berlin|[CodePen](https://codepen.io/3qberlin/pen/VwVxdER)|
| 04 |Eden.C|[Codepen](https://codepen.io/iseden/pen/ZEmoyzx)|
| 05 |ann6212|[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/ZEmoRqX?editors=1100)|
| 06 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/mdQLKzN) |
| 07 |hannahTW|[Codepen](https://codepen.io/hangineer/pen/eYQrKPe)|
| 08 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/yLQjEQX) |
| 09 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/zYMjaMW) |
| 10 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/abQGKXj) |
| 11 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/NWEMzmR)
| 12 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/yLQjEWz) |
| 13 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/vYQjrqo) |
| 14 | shcopy | [Codepen](https://codepen.io/shcopy/pen/zYMjLOL)|
| 15 | SmallP | [Codepen](https://codepen.io/smallp/pen/OJaZwPN)|
| 16 | Rochel#4754 |[Codepen](https://codepen.io/rochelwang1205/pen/jOQxpEw) |
| 17 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/KKrRBwv)|
| 18 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/NWEMzVb) |
| 19 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/BaGxPoL)|
| 20 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/eYQrjpr)|
| 21 | Morning#7336 | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/NWEMBGp)|
| 22 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/VwVxBvo) |
| 23 | townyuan | [Codepen](https://codepen.io/townyuan/pen/VwVxBaZ)|
| 24 | AYA | [Codepen](https://codepen.io/NoNameNote/full/yLQjqep) |
| 25 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/JjevBGz?editors=1100) |
| 26 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/QWJrBwv) |
| 27 | runweiting | [Codepen](https://codepen.io/weiting14/pen/VwVxBKZ) |
| 28 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/PoxeBQp) |
| 29 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/poQVZqO) |
| 30 | Cura | [Codepen](https://codepen.io/curalin/pen/bGQMjXv?editors=1100) |
| 31 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/jOQxpjv?editors=1100) |
| 32 | .icesam | [Codepen](https://codepen.io/icesam/pen/KKrRBOG) |
| 33 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/qBQYyeO) |
| 34 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/PoxedoO) |
| 35 | Martin | [Codepen](https://codepen.io/markyourpage/pen/poQVOzq) |
| 36 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/yLQjqmG) |
| 37 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/WNYJgEL) |
| 38 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/gOQzdGz) |
| 39 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/MWzGqbM) |
| 40 | Uli | [Codepen](https://codepen.io/uli1313/pen/RwqyYqy) |
| 41 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/gOQzdBd) |
| 42 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/MWzGqLw) |
| 43 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/Poxedgx) |
| 44 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/KKrRGQg) |
| 45 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/eYQrPeR) |
| 46 | m_m | [Codepen](https://codepen.io/minnn7716/pen/BaGxqVy) |
| 47 | MKL | [Codepen](https://codepen.io/Code-My/pen/yLQjRGX)|
| 48 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/gOQzBVp) |
| 49 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/MWzGzQB) |
| 50 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/MWzGzZz) |
| 51 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/abQGQPe) |
| 52 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/ZEmoVvE)|
| 53 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/poQVGKR?editors=1100) |
| 54 | Long | [Codepen](https://codepen.io/Loonng/pen/dyQeEbd?editors=1100) |
| 55 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/oNQdRXE) |
| 56 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/QWJrPrP) |
| 57 | WA | [Codepen](https://codepen.io/ldddl/pen/vYQjwQM) |
| 58 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/ZEmodvM) |
| 59 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/BaGxPgJ?editors=0100) |
| 60 | Randy | [Codepen](https://codepen.io/landy510/pen/OJaZKVz?editors=1100) |
| 61 | sinsaki | [Codepen](https://codepen.io/a8322342/pen/OJaZKgZ) |
| 62 | wind | [Codepen](https://codepen.io/wind7y/pen/poQVMRY) |
| 63 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/eYQrqeY) |
| 64 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/bGQKbNy?editors=1100) |
| 65 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/xxQzKwL) |
| 66 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/JjeZjYw) |
| 67 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/gOQKOGM) |
| 68 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/yLQEYWR) |
| 69 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/vYQrGgz) |
| 70 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/yLQEJLo) |
| 71 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/bGQKedw) |
| 72 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/GRwGqGj) |
| 73 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/BaGVLjJ) |
| 74 | homer | [Codepen](https://codepen.io/Buckhorn/pen/NWEzRBe) |
| 75 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/VwVdmzB) |
| 76 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/QWJxdJQ) |
| 77 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/oNQyZBz) |
| 78 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/RwqJjNX) |
| 79 | awei | [Codepen](https://codepen.io/hong-wei/pen/vYQrpwd?editors=1100) |
| 80 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/mdQLQYW) |
| 81 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/dyQKejW) |
| 82 | Lesly1279 | [Codepen](https://codepen.io/LeslyChang/pen/BaGVoRQ) |
| 83 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/YzRvdqG) |
| 84 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/bGQKOwL) |
| 85 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/MWzXZvR) |
| 86 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/eYQKxKv) |
| 87 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/wvQXOWG)|
| 88 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/JjeZzXm) |
| 89 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/QWJxPrJ) |
| 90 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/NWEzmEE) |
| 91 | FanJJ | [Codepen](https://codepen.io/yfchenn/pen/gOQjpwd) |
| 92 | rjjq | [Codepen](https://codepen.io/rjjq/pen/xxQJEGo) |
| 93 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/YzRjpQa) |
| 94 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY) |
| 95 | .ztion | [Codepen](https://codepen.io/ztion/pen/MWzBGwB) |
| 96 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/bGQjMEr)
| 97 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/yLQqqMb) |
| 98 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/ExOpJOx)|
| 99 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/GRwBVjj) |
| 100 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR)|
| 101 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/bGQmNrW) |
| 102| E Y| [Codepen](https://codepen.io/EY-chen/pen/yLQRNwL?editors=1100) |
| 103 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/JjemKJM) |
| 104 | celia9182 | [Codepen](https://codepen.io/celia01/pen/KKrGyqd)|
| 105 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/eYQQJvy)|
| 106 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/mdQQRPL?editors=1100) |
| 107 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/ExOOZGw) |
| 108 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/RwqqjXv) |
| 109 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/GRwwegQ) |
| 110 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/eYQKEza) |
| 111 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/poQqQPm) |
| 112 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/XWyOmWL) |
| 113 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/poQYbgZ) |
| 114 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/mdQgbVo) |
| 115 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/PoxMPPr) |
| 116 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/zYMgwwr?editors=1100) |
|117|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/qBQeQjY)|
|118|阿維#2569|[Codepen](https://codepen.io/gzzpwnbb-the-bold/pen/LYMPJWa?editors=1100)|
| 119 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/RwEVywJ) |
| 120 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/ExMagxK) |

---

- 快速複製格式：

| 01 | user | [Codepen]() |