下方有提供部分程式碼，請試著在「`...`」的地方加上 flex 屬性完成剩下的版型，如圖：


HTML

<nav class="nav">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="100">
  <ul class="nav-list">
    <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
    <li class="nav-item"><a class="nav-link" href="#">關於</a></li>
    <li class="nav-item"><a class="nav-link" href="#">產品</a></li>
    <li class="nav-item"><a class="nav-link" href="#">購物車</a></li>
  </ul>
</nav>

<div class="container">
  <div class="card">
  <img class="card-img" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" width="200">
  <div class="card-body">
    <h2 class="title">標題文字</h2>
    <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ipsum ab sit neque accusamus praesentium, quisquam veritatis perferendis ipsa aspernatur nulla!<a href="https://unsplash.com/photos/HlNcigvUi4Q">圖來自unsplash</a>
    </p>
    <a href="#" class="btn">點我</a>
      </div>
   </div>
</div> 

CSS

.nav{
  background-color: #e8eeea;
  padding: 0 10px;
  margin-bottom: 25px;
  ...
}
.nav-list{
  ...
}
.nav-link{
  text-decoration: none;
  color: #00cc99;
  padding: 5px 10px;
}
.container{
  width: 800px;
  margin: 0 auto;
}
.title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
.card{
  margin-bottom: 10px;
  ...
}
.card:nth-child(2){
  ...
}
.card:nth-child(2) .card-img{
   margin-right: 0;
   margin-left: 5px;
}
.card-img{
  margin-right: 5px;
}
.btn{
  width: 50px;
  padding: 8px 16px;
  color: white;
  background-color: #00cc99;
  text-decoration: none;
  display: block;
  margin-left: auto;
  text-align: center;
}

> 記得加上 CSS Reset
> nth:child(n) 的用法可以參考[此文章](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)的第 22 項

## 回報流程

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

<!-- 解答：
https://codepen.io/hexschool/pen/ZExEzyB
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-:|:----------------:|:-----------------------------------------------------------------:|
| 01 | Moreene | [CodePen](https://codepen.io/Moreene/pen/oNQEoez) |
| 02 | billy_ti | [CodePen](https://codepen.io/Ti-Show/pen/yLQvPow?editors=1100) |
| 03 | Ann Chou#0146 | [CodePen](https://codepen.io/annchou_illu/pen/MWzQOvd) |
| 04 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/NWEywwL) |
| 05 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/JjepOOX?editors=1100) |
| 06 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/KKrQyZJ?editors=1100) |
| 07 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/gOQvXev) |
| 08 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/VwVQrMp) |
| 09 | homer | [Codepen](https://codepen.io/Buckhorn/pen/ExOQbLV) |
| 10 | runweiting | [Codepen](https://codepen.io/weiting14/pen/MWzQOQM) |
| 11 | awei | [Codepen](https://codepen.io/hong-wei/pen/vYQdWre) |
| 12 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR) |
| 13 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/zYMRPJv?editors=1100) |
| 14 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/jOQZapJ) |
| 15 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/zYMRPLv) |
| 16 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/oNQEoaW?editors=1100) |
| 17 | pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/qBQxVMq?editors=1100) |
| 18 | Tami | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/rNQJYYB) |
| 19 | townyuan | [CodePen](https://codepen.io/townyuan/pen/mdQXqxq) |
| 20 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/ExOQboj) |
| 21 | Cura | [Codepen](https://codepen.io/curalin/pen/ZEmraqE?editors=1100) |
| 22 | Marvin | [Codepen](https://codepen.io/chi-Wu/pen/vYQdWQW) |
| 23 | m_m | [Codepen](https://codepen.io/minnn7716/pen/wvQyPNQ) |
| 24 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/jOQZavJ) |
| 25 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/PoxQEqx?editors=1100) |
| 26 | SmallP | [Codepen](https://codepen.io/smallp/pen/rNQJYQV) |
| 27 | 0naomi0 | [Codepen](https://codepen.io/0Naomi0/pen/qBQxppx?editors=1100) |
| 28 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/bGQLaYb) |
| 29 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/WNYMdJv) |
| 30 | Martin | [Codepen](https://codepen.io/markyourpage/pen/PoxQEQv) |
| 31 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/OJaQzxY) |
| 32 | judy123 | [Codepen](https://codepen.io/hsuantsong/pen/NWEyXLq?editors=1100) |
| 33 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/xxQYpyW) |
| 34 | .icesam | [Codepen](https://codepen.io/icesam/pen/yLQvpRV) |
| 35 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/dyQdJaQ) |
| 36 | WA | [Codepen](https://codepen.io/ldddl/pen/abQqqoK) |
| 37 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/VwVQQLN?editors=1100) |
| 38 | Uli | [Codepen](https://codepen.io/uli1313/pen/zYMRRqa) |
| 39 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/bGQLLgB?editors=1100) |
| 40 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/dyQdJxw) |
| 41 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/dyQddBY) |
| 42 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/MWzQVwz?editors=1100) |
| 43 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/ZEmrxGw?editors=1100) |
| 44 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/wvQymaP?editors=1100) |
| 45 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/oNQEqwz) |
| 46 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/xxQYWXw) |
| 47 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/zYMRWGV) |
| 48 | Celine#6773 | [Codepen](https://codepen.io/celinephoebe/pen/zYMRWdY) |
| 49 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/gOQvoEV) |
| 50 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/VwVQxyB) |
| 51 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/GRwQdbV) |
| 52 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/xxQYzKz) |
| 53 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/PoxQaoo) |
| 54 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/MWzQXwv) |
| 55 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/XWyZqpp) |
| 56 | .ztion | [Codepen](https://codepen.io/ztion/pen/KKrQeyX?editors=1100) |
| 57 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/ExOQRbO?editors=1100) |
| 58 | Lianne.. | [Codepen](https://codepen.io/Elaina-L/pen/dyQdKdx) |
| 59 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/bGQLKqB) |
| 60 | jasonlll1111 | [Codepen](https://codepen.io/jsyzmq9328/pen/gOQvKjM?editors=1100) |
| 61 | jasonlll1111 | [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY) |
| 62 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/PoxQBZK) |
| 63 | Eden.C | [Codepen](https://codepen.io/iseden/pen/KKrQBgG) |
| 64 | MKL | [Codepen](https://codepen.io/Code-My/pen/oNQEyRg?editors=1100) |
| 65 | rjjq | [Codepen](https://codepen.io/rjjq/pen/OJaQwZZ)|
| 66 | peggydbc1217 | [Codepen](https://codepen.io/peggydbc1217/pen/abQqjgm)|
| 67 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/oNQEMrw)|
| 68 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/oNQEPXG)|
| 69 | Long | [Codepen](https://codepen.io/Loonng/pen/mdQXGrG)|
| 70 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/GRwQXPa?editors=0110)|
| 71 | Brian#7046 | [Codepen](https://codepen.io/PochienTsai/pen/bGQLmJr)|
| 72 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/VwVQVKj)|
| 73 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/zYMRMjx)|
| 74 | wind | [Codepen](https://codepen.io/wind7y/pen/VwVQVzm)|
| 75 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/OJaQarE?editors=1100)|
| 76 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/wvQyQRE)|
| 77 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/QWJQzwR)|
| 78 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/poQaqRJ)|
| 79 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/VwVQqVE)|
| 80 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/RwqQqqj)|
| 81 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/JjepwQZ) |
| 82 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/mdQXYgE) |
| 83 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/NWEyQNm) |
| 84 | hananhTW | [Codepen](https://codepen.io/hangineer/pen/XWyZxzB)|
| 85 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/RwqQxZe?editors=0100)|
| 86 | Randy | [Codepen](https://codepen.io/landy510/pen/VwVXZmN?editors=0100)|
| 87 | hsuhsusophie | [Codepen](https://codepen.io/hsuhsusophie/pen/ExOEYWp)|
| 88 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/NWEYWRy)|
| 89 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/vYQREXR?editors=1100)|
| 90 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/VwVXLrJ)|
| 91 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/details/VwVQGrd)|
| 92 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/yLQKJQr)|
| 93 | peggy$3169 | [Codepen](https://codepen.io/peggylai/pen/oNQqYPr?editors=1100)|
| 94 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/abQYBrM) |
| 95 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/zYMWNqX)|
| 96 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/jOQzyXX)|
| 97 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/QWJmvxv)|
| 98 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/KKroovB)
| 99 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/poQLKoE?editors=1100)|
| 100 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/LYXdrzM?editors=1100)|
| 101 | stoos_1369 | [Codepen](https://codepen.io/Stooss/pen/mdQxKvJ?editors=1100)|
| 102 | meowmeow | [Codepen](https://codepen.io/hexschool/pen/ZExEzyB)|
| 103 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/QWJmZyN)|
| 104 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/vYQRzbz)|
| 105 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/WNYzLVb)|
| 106 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/jOQzoem)|
| 107 | PayRoom | [CodePen](https://codepen.io/water38198/pen/wvQmLRm)
| 108 | 泊岸#3466 | [CodePen](https://codepen.io/qoq77416416/pen/dyQdBeN)
| 109 | ci_ling | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/LYXmGdj)|
| 110 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/eYQrBdW)|
| 111 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/VwVxMOJ)|
| 112 | Lesly1279 | [Codepen](https://codepen.io/LeslyChang/pen/BaGrwOL)|
| 113 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/ExOLReL) |
| 114 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/VwVxBPw?editors=1100)|
| 115 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/vYQjVbq)|
| 116 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/poQVqeB)|
| 117| sinsaki | [Codepen](https://codepen.io/a8322342/pen/dyQerEM)|
| 118 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/jOQxoZr?editors=1100)|
| 119| MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/poQKExM)|
| 120 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/XWyYpaP)|
| 121 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/XWyYpBo)|
| 122 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/gOQKgWP?editors=1100)|
| 123 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/ExORXXO)|
| 124 | Eason#7884 | [Codepen](https://codepen.io/ASLEO/pen/xxQzpGx)|
| 125 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/QWJxYZj)|
| 126 | cyrus_li | [codepen](https://codepen.io/likahang/pen/rNQrqxV)|
| 127 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/YzRjdyX)|
| 128 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/zYMJEVZ)|
| 129 | celia9182 | [Codepen](https://codepen.io/celia01/pen/OJaBPjb?editors=1100)|
| 130 | EY | [Codepen](https://codepen.io/EY-chen/pen/rNQqVLX?editors=1100)|
| 131 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/jOQQEjZ?editors=1100)|
| 132 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/NWEEwVP)|
| 133 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/QWJJYJV)|
| 134 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/LYXqEzr)|
| 135 | 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/rNQRrRB?editors=1100)|
| 136 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/oNQVKMp?editors=1100)|
| 137 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/bGQJPdB)|
| 138 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/OJaemLw)|
|139|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/abQeQmV)|
|140|ChrisSQR|[Codepen](https://codepen.io/ChrisSQR/pen/oNJZVXz)|
|141|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/BavJPVo?editors=1100)|
|142|楓|[Codepen](https://codepen.io/maplestartend/pen/BabaVGW)|

- 快速複製格式：

| 0 | user | [Codepen]()|