# 🏅 Day 18 - container 容器應用

通常網頁的主要內容都會放在 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 / 答案|
|:----:|:----:|:----:|
| 1 | han | [Codepen](https://codepen.io/iamHanCheng/pen/poXoYdm) |
| 2 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/jOjbjjK) |
| 3 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/JjQYgYd) |
| 4 | yoishere | [Codepen](https://codepen.io/yoishere/pen/ExBVqaY) |
|5|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/JjQYgGY)|
|6|tim|[Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme)|
| 7 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/KKjdOqJ) |
| 8 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/LYKpwOb) |
| 9 | Mike | [Codepen](https://codepen.io/mike2049/pen/ZEdbgXg?editors=1100) |
| 10 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/wvLKVXY) |
| 11 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/jOjbgvo) |
| 12 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/qBzbWOP) |
| 13 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/dyBGbZj) |
| 14 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/eYwJYWK) |
| 15 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/OJeMJYj) |
| 16 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/qBzbBGE) |
| 17 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/rNExVBL) |
| 18 | Aura Tao | [Codepen](https://codepen.io/AURATAO/pen/PorZqox) |
| 19 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/MWMaMMZ?editors=1100) |
| 20 | kawa | [Codepen](https://codepen.io/z83xji6/pen/bGPEdRb) |
| 21 | hao jing | [Codepen](https://codepen.io/hjxu/pen/ExBVzob) |
| 22 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/BagjNOa)|
| 23 | TONY | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/ExBPjrE) |
| 24 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/vYqLOQP) |
| 25 | xiang | [Codepen](https://codepen.io/XIANG-XIANG/pen/LYKGVwX) |
| 26 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/PorZPEG) |
| 27 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/eYwJpKP) |
| 28 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/LYKGpwV?editors=1100) |
| 29 | Discord | [Codepen](https://codepen.io/barry91205/pen/gONPPgX) |
| 30 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/YzowwNZ) |
| 31 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/bGPEErj) |
| 32 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/vYqLGJV) |
| 33 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/qBzbZvM) |
| 34 | Jim | [Codepen](https://codepen.io/JimChou/pen/MWMKydo) |
| 35 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/ZEdQOLx)|
| 36 | xcx100 | [Codepen](https://codepen.io/c13026/pen/oNrbLKj) |
| 37 |macihuang | [Codepen](https://codepen.io/macy1215/pen/YzowGNN) |
| 38 | MY | [Codepen](https://codepen.io/ahmomoz/pen/gONPwQz) |
| 39 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/zYVrKMr) |
| 40 | mindful7755(toro) | [Codepen](https://codepen.io/andawu/pen/PorZGvd) |
| 41 | chris | [Codepen](https://codepen.io/chrischen666/pen/zYVroQR) |
| 42 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/Bagjppz?editors=1100) |
| 43 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/VwJemqq) |
| 44 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/eYwJGmJ)|
| 45 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/KKjVXmp)|
| 46 | DoryH |[Codepen](https://codepen.io/dorihung/pen/NWZxajQ)|
| 47 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/RwzrLqd) |
| 48 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/MWMKOWv) |
| 49 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/jOjWaKa) |
| 50 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/poXgpgx) |
| 51| Lobinda | [Codepen](https://codepen.io/Lobinda/pen/vYqLpjJ)|
| 52 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/ExBPQqE) |
| 53 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/bGPEMwL) |
| 54 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/VwJedJq) |
| 55 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/XWLXPbQ) |
| 56 | shinelalala | [Codepen](https://codepen.io/cdjpjets-the-solid/pen/KKjVbrE) |
| 57 | emmayo | [Codepen](https://codepen.io/emmayo/pen/bGPEyQG) |
| 58 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/VwJeJzO)|
| 59 | neo |[Codepen](https://codepen.io/Neo-oo/pen/NWZxZzp?editors=1100)|
| 60 | Yolanda |[Codepen](https://codepen.io/vcscqrtz-the-animator/pen/RwzrzEW)|
| 61 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/KKjzKgW) |
| 62 | wind | [Codepen](https://codepen.io/wind7y/pen/OJeNVvq) |
| 63 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/jOjqqKE)
| 64 | glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/xxoVOQM)|
| 65 | Hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/YzoqQYo) |
| 66 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/OJeMXJV) |
| 66 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/zYVqboP) |
| 67 | n913239 | [Codepen](https://codepen.io/n913239/pen/qBzNBJL) |
| 68 | GAVI | [Codepen](https://codepen.io/xmbbyswh-the-reactor/pen/eYwzYoM) |
| 69 | Kim | [Codepen](https://codepen.io/kim0101__/pen/ZEdOYRw?editors=1100) |
| 70 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/WNqxobg) |
| 71 |OSN|[Codepen](https://codepen.io/osncodepen/pen/Porzbja)|
| 72 |俊|[Codepen](https://codepen.io/jun12079/pen/MWMeEWx)|
| 73 | jerry_66983 | [Codepen](https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&amp;display=swap) |
| 74 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/gONMveK) |
| 75 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/PorzawO) |
| 75 | ho_yc | [Codepen](https://codepen.io/Ho_HYC/pen/wvLWVEq) |
| 76 | 地瓜 |[Codepen](https://codepen.io/huangtzuchin/pen/ZEdpYza)|
| 78 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/oNrzxJw)|
| 79 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/zYVKRKg)|
| 80 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/qBzqgae)|
| 81 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/GRbNbPw?editors=1100)|
| 82 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/wvLggXN?editors=1100)|
| 83 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/PorpPJR)|
| 84 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/LYKyeKm)|
| 85 | Toung | [Codepen](https://codepen.io/Toung/pen/gONWzjZ)|
| 86 | 小翎 | [Codepen](https://codepen.io/debbielin/pen/GRbmeJZ?editors=1100) |
| 88 | Emma | [Codepen](https://codepen.io/Emma0919/pen/wvLqMdX) |
| 89 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/vYqJQBM)|
| 90 | Judy | [Codepen](https://codepen.io/yangchi/pen/xxoPzjR)|
| 91 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/bGPadxO) |
| 92 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/PorRrNE) |
| 93 | zen | [Codepen](https://codepen.io/zen742937/pen/yLdjqeQ) |
| 94 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/KKjrgdZ) |
| 95 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/oNrJYRG) |
| 96 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/XWLwRWe) |
| 97 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/bGPyomg?editors=1100) |
| 98 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/abeVmpm?editors=1100) |
<!--
| No | Discord | [Codepen] ()|
-->