### 題目

### RWD 基本排版

請複製此 [Codepen](https://codepen.io/hexschool/pen/ZExpovQ) 做出響應式排版：
任務中已提供 HTML 的部分，請同學將 CSS 內有「`...`」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排


>平板尺寸時設定為兩個一排


>手機尺寸時設定為一個一排


> 需使用 **CSS Reset**

---

### RWD 排版間距
為了讓每個卡片之間都能有間距，可以在卡片左右加上 padding，卡片間的間距就會從兩個 padding 產生出來，此時最左及最右邊的卡片都會多出 padding。
要將最左及最右多出的 padding 消除，就要在卡片外層（整體卡片列表 `.card`）使用 margin 負值回推。
另外，為了讓 container 不會貼齊卡片，container 也需設定左右 padding。
（推擠的值需依照設計稿設定）
以[三四週設計稿](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/screen/0c592e9b-6edc-48d1-9540-27cef649efb7/specs/)為例，間距寬度為 24px，則推擠的值為 24px/2 = **12px**

<img src="https://i.imgur.com/ZdNE1uw.png" width="300px" style="margin-bottom: 8px">

程式碼範例：

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  /* 依照設計稿 PC 版：
   * 容器寬度為 1296px，因為有設定為 border-box，所以整體寬度需加上左右 padding
   * 整體 container 寬度為 1296px + 12px*2 = 1320px   
   * （關於 box-sizing 觀念可以再回顧 Day7 每日任務）*/
}

.card { /* 卡片列表 */
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.card-item { /* 卡片（寬度設定以 PC 版四個一排為例） */
  width: 25%;
  padding-left: 12px;
  padding-right: 12px;
}

請**運用「RWD 基本排版」完成的程式碼**，為卡片之間加上 **24px** 的間距
> 容器寬度：
> 桌機尺寸時為 1296px
> 平板尺寸時為 696px
> 手機尺寸時為 348px
> **需自行調整 container 寬度**

## 回報流程

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


<!-- 解答：（可以寫在一起，也可以分開提交）
RWD 基本排版：https://codepen.io/hexschool/pen/gOeMNwW
RWD 基本排版 + 間距：https://codepen.io/hexschool/pen/WNzoydr?editors=1100
-->

回報區
---

|| Discord | CodePen / 答案 |
|:-----------------:|:-----------------:|:--------------------------------------------------------------------------:|
|01| Eden | [Codepen](https://codepen.io/iseden/pen/MWzqovp)|
|02| Rochel#4754 |[Codepen](https://codepen.io/rochelwang1205/pen/ExOeXwQ) |
|03| Berlin |[Codepen](https://codepen.io/3qberlin/pen/poQOwWR) |
|04| Moreene |[CodePen](https://codepen.io/Moreene/pen/poQOwdR)|
|05| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/YzROQEB)|
|06| pinyi_9 |[CodePen](https://codepen.io/Wpypy/pen/XWyPgzz?editors=1100)|
|07| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/jOQvwxV)|
|08| m_m |[CodePen](https://codepen.io/minnn7716/pen/jOQvwQB)|
|09| SmallP |[CodePen](https://codepen.io/smallp/pen/ExOeXpL)|
|10| Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/NWELgmb) |
| 11 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/ExOeXze) |
|12|townyuan|[CodePen](https://codepen.io/townyuan/pen/RwqYgeX)|
| 13 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/VwVGWOJ) |
|14|xuan#0808|[CodePen](https://codepen.io/xuan0915/pen/JjeaJgx)|
| 15 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/gOQdRVa) |
| 16 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/abQawXa) |
| 17 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/LYXJjyP) |
| 18 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/abQaywx) |
| 19 | ryan.chou | [CodePen](https://codepen.io/csw8524/pen/ExOevwJ) |
| 20 | hance__kao | [CodePen](https://codepen.io/HanceKao/pen/RwqYgBz?editors=1100) |
| 21 | lychee_kk | [CodePen](https://codepen.io/kakakala/pen/eYQLEQX) |
| 22 | zhu.lin | [CodePen](https://codepen.io/codepenplayer/pen/wvQEqMg) |
| 23 | vic_liou | [CodePen](https://codepen.io/allenliou-java/pen/jOQvLXp) |
| 24 | Lianne._. | [CodePen](https://codepen.io/Elaina-L/pen/gOQdGbX?editors=1100) |
| 25 | 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/abQaLoO?editors=1100) |
| 26 | eric0529 |[Codepen](https://codepen.io/delichaomoon/pen/abQawyY)|
| 27 | ovo.yun | [CodePen](https://codepen.io/yun-the-scripter/pen/MWzqEeM?editors=1100) |
| 28 | Martin | [CodePen](https://codepen.io/markyourpage/pen/XWyPeWr) |
| 29 | dodo_6666 | [CodePen](https://codepen.io/MissDouble/pen/VwVGMjb?editors=1100) |
| 30 | kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/yLQxzbm) |
| 31 | Ting.66 | [CodePen](https://codepen.io/Ting66/pen/poQOWpM?editors=1100) |
| 32 | dong2328 | [CodePen](https://codepen.io/htamlkdz-the-encoder/pen/RwqYLxQ) |
| 33 | .ztion | [Codepen](https://codepen.io/ztion/pen/jOQvGLR?editors=1100) |
| 34 | .rainielin | [CodePen](https://codepen.io/Yunchian-Lin/pen/ExOewRN) |
| 35 | .dtou | [CodePen](https://codepen.io/conlyvrg-the-reactor/pen/wvQErEN) |
| 36 | Uli | [CodePen](https://codepen.io/uli1313/pen/OJaoOMY) |
| 37 | runweiting | [CodePen](https://codepen.io/weiting14/pen/bGQxrMY) |
| 38 | Paul#7426 | [CodePen](https://codepen.io/paul-1997/pen/oNQPGGw?editors=0110) |
| 39 | Cosmos | [CodePen](https://codepen.io/violet7755/pen/rNQZYjw) |
| 40 | hao2485 | [CodePen](https://codepen.io/Seanfeb16/pen/yLQxPvM) |
| 41 | Long | [CodePen](https://codepen.io/Loonng/pen/XWyPzYZ) |
| 42 | 舜仁 | [CodePen](https://codepen.io/randomno/pen/wvQEPZW) |
| 43 | Cura | [CodePen](https://codepen.io/curalin/pen/vYQzWjM?editors=1100) |
| 44 | Yu | [CodePen](https://codepen.io/yuch3n_chen/pen/RwqYxvK) |
| 45 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/PoxdExK)|
| 46 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/zYMJRvx)|
| 47 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/QWJVQBX) |
| 48 | .icesam | [Codepen](https://codepen.io/icesam/pen/JjeaLrv) |
| 49 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/mdQGxab) |
| 50 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/dyQqeGx) |
| 51 |yunhsinnnnnnn | [CodePen](https://codepen.io/yun___hsin/pen/bGQxMor?editors=1100) |
| 52 |cyrus_li | [CodePen](https://codepen.io/likahang/pen/NWELYVb) |
| 53 | adele6199 | [CodePen](https://codepen.io/codepen-io-winnie/pen/rNQZvJo?editors=1100) |
| 54 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/MWzqXOg) |
| 55 | shcopy | [CodePen](https://codepen.io/shcopy/pen/JjeavYz) |
| 56 | awei | [CodePen](https://codepen.io/hong-wei/pen/poQOZyy) |
| 57 | JohnChien | [CodePen](https://codepen.io/glqwazid-the-selector/pen/eYQLVVN) |
| 58 | soniawu | [CodePen](https://codepen.io/YUJOU/pen/KKrxByg?editors=1100) |
| 59 | yuling#1634 | [Codepen](https://codepen.io/igzdflpu/pen/wvQEYwm)|
| 60 | wind | [CodePen](https://codepen.io/wind7y/pen/ExOeeoJ) |
| 61 | 泊岸#3466 | [CodePen](https://codepen.io/qoq77416416/pen/BaGOxgJ) |
| 62 | ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/poQOqJW) |
| 63 | 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/zYMJQbK?editors=1100) |
| 64 | Randy | [CodePen](https://codepen.io/landy510/pen/poQOXzJ?editors=1100) |
| 65 | ning_bobo | [CodePen](https://codepen.io/ninghsu/pen/poQOXXw?editors=1100) |
| 66 | hannahTW | [CodePen](https://codepen.io/hangineer/pen/wvQELbG) |
| 77 | marskuo | [CodePen](https://codepen.io/MarsKuo/pen/rNQZXVv) |
| 78 | PayRoom | [CodePen](https://codepen.io/water38198/pen/ZEmqEeB) |
| 79 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/KKrGwLB) |
| 80 | ROGER | [CodePen](https://codepen.io/jxyrmcxm-the-scripter/pen/abQROoo) |
| 81 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/WNYabqJ)
| 82 | Atsushi#6888 | [CodePen](https://codepen.io/atsushi-amuro/pen/VwVELjP?editors=1100) |
| 83 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/oNQabPg) |
| 84 | tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/xxQyVWO) |
| 85 | Tami | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/KKrGgXZ) |
| 86 | homer | [CodePen](https://codepen.io/Buckhorn/pen/abQRpBy) |
| 87 | rjjq | [CodePen](https://codepen.io/rjjq/pen/OJaBOVr) |
| 88 | celia9182 | [Codepen](https://codepen.io/celia01/pen/zYMmpGj)|
| 89 | mm_ieat | [CodePen](https://codepen.io/MINN3/pen/eYQPymy) |
| 90 | .manmanlai | [CodePen](https://codepen.io/kikiyang/pen/eYQPbzy?editors=1100) |
| 91 | Johnson3669 | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/qBQJBmo) |
| 92 | liam9930 | [CodePen](https://codepen.io/jgnjfvvt-the-lessful/pen/zYMMYvB) |
| 93 | Eileen#6454 | [CodePen](https://codepen.io/Eileen-io/pen/MWzzwmL) |
| 94 | 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/NWEEXPG) |
| 95 | 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/PoxxRzB)|
| 96 | Robert.H | [CodePen](https://codepen.io/Robert1205/pen/QWJJxVV) |
| 97 | sinsaki225 | [CodePen](https://codepen.io/a8322342/pen/eYQQPbw) |
| 98 | 阿賀＃3700 | [CodePen](https://codepen.io/sungho/pen/OJaadPW) |
| 99 | meowmeow | [CodePen](https://codepen.io/snow1224/pen/yLQQwdJ) |
| 100 | swalok47716#7332 | [CodePen](https://codepen.io/swalok/pen/WNYYBeE) |
| 101 | Mylène | [CodePen](https://codepen.io/hamajibashi/pen/VwVqwqx) |
| 102 | yuan2781 | [CodePen](https://codepen.io/ismebir/pen/WNYLrBj) |
| 103 | .zack_P | [CodePen](https://codepen.io/Designer-PH/pen/oNQJxXK) |
| 104 | yuchou#5749 | [CodePen](https://codepen.io/yu-chou/pen/ZEmVeVv) |
| 105 | 墨莉 | [CodePen](https://codepen.io/hoku0306/pen/rNQoreB?editors=1100) |
| 106 | Aritan#1931 | [CodePen](https://codepen.io/Aritan/pen/WNYLKGY) |
| 107 | ChrisSQR#3308 | [CodePen](https://codepen.io/ChrisSQR/pen/XWyObNP) |
| 108 | RX00#5351 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/GRwzpzG?editors=1100) |
| 109| EY | [CodePen](https://codepen.io/EY-chen/pen/VwVgYLx) |
| 110 | andersonshen | [CodePen](https://codepen.io/luxyenni-the-bold/pen/RwqveYr) |
| 111 | WA | [CodePen](https://codepen.io/ldddl/pen/BaGbNOQ) |
| 112 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/qBQvNyN) |
| 113 | hsuhsusophie#7338 | [CodePen](https://codepen.io/hsuhsusophie/pen/mdQoLRL) |
| 114 | 希月 | [CodePen](https://codepen.io/9001mina/pen/mdQogYa?editors=1100) |
| 115 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/WNYWvVO) |
| 116 | Lesly1279 | [Codepen](https://codepen.io/LeslyChang/pen/PoxgWzb) |
| 117 | NathanJames#8120 | [CodePen](https://codepen.io/ufo060204/pen/jOQRpPL) |
|118|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/oNQKQqa)|
|119|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/RwqXzdX)|
|120|阿維#2569|[Codepen](https://codepen.io/gzzpwnbb-the-bold/pen/JjwPwXm?editors=1100)|
| 121 | 阿富#0389 | [CodePen](https://codepen.io/spring40747/pen/eYbOvPQ) |
| 122 | peggy3169 | [CodePen](https://codepen.io/peggylai/pen/poqvaeL) |
| 123 | FanJJ#8061 | [CodePen](https://codepen.io/yfchenn/pen/rNoVBqP) |
| 124 | patrickpie | [CodePen](https://codepen.io/patrickpie/pen/RwEPmqr?editors=1100) |
| 125 | murphy1665 | [CodePen](https://codepen.io/icephy/pen/WNLQoWZ) |
| 126 | Jimmychang | [CodePen](https://codepen.io/JimmyChangWenChi/pen/eYbRQLw?editors=1100) |
| 127 | 楓 | [CodePen](https://codepen.io/maplestartend/pen/NWJPREK) |
<!--
快速複製格式

| 00 | user | [CodePen]() |

-->