タグの使い方について

前提・実現したいこと

https://code-step.com/demo/html/corporate3/#
のサイトを模写しているのですが<section id="project"></section>のなかにdivタグを使ってwrapperクラスを設けていますがなぜでしょうか。sectionタグにwrapperクラスを記載してはだめなのでしょうか。

発生している問題・エラーメッセージ

該当のソースコード

html
1 <section id="project">
2          <div class="wrapper">
3            <h2 class="sec-title">建築事例をご紹介</h2>
4            <ul class="list">
5              <li>
6                <a href="#">
7                  <img src="img/project1.jpg" alt="">
8                  <p class="name">PROJECT_01</p>
9                </a>
10              </li>
11              <li>
12                <a href="#">
13                  <img src="img/project2.jpg" alt="">
14                  <p class="name">PROJECT_02</p>
15                </a>
16              </li>
17              <li>
18                <a href="#">
19                  <img src="img/project3.jpg" alt="">
20                  <p class="name">PROJECT_03</p>
21                </a>
22              </li>
23              <li>
24                <a href="#">
25                  <img src="img/project4.jpg" alt="">
26                  <p class="name">PROJECT_04</p>
27                </a>
28              </li>
29            </ul>
30          </div>
31        </section>

css
1html {
2  font-size: 100%;
3}
4body {
5  color: #121212;
6  font-family: 'Noto Sans JP', sans-serif;
7}
8a {
9  color: #121212;
10  text-decoration: none;
11}
12img {
13  max-width: 100%;
14  vertical-align: bottom;
15}
16li {
17  list-style: none;
18}
19
20/* サイドメニューの横幅分だけ左にmarginをとる */
21.container {
22  margin-left: 300px;
23}
24/* コンテンツ幅を設定するための共通クラス */
25.wrapper {
26  max-width: 900px;
27  padding: 80px 20px;
28  margin: 0 auto;
29}
30.site-title {
31  width: 200px;
32  line-height: 1px;
33  margin-bottom: 30px;
34}
35.site-title a {
36  display: block;
37}
38/*
39セクションタイトル用の共通クラス
40両サイドの線は疑似要素で作成して、Flexboxで横並びに配置
41※beforeが左の線、afterが右の線
42*/
43.sec-title {
44  display: flex;
45  align-items: center;
46  justify-content: space-between;
47  font-size: 1.75rem;
48  margin-bottom: 60px;
49  text-align: center;
50}
51.sec-title::before,
52.sec-title::after {
53  border-top: 1px solid;
54  content: "";
55  width: 28%;
56}
57
58/*-------------------------------------------
59ヘッダー
60-------------------------------------------*/
61/*
62サイドのロゴとグローバルナビゲーションは「header」タグで囲む
63※サイドに配置しているが、ロゴとグローバルナビゲーションを含んだヘッダー要素のため、
64「aside」タグではなく「header」タグを使用します。
65「aside」タグは、メインコンテンツとは直接関係ない補足的な情報をサイドバーとして配置する場合に使用します。
66例えば、Codestep内の「中級編：ブログサイト」のような使い方です。
67
68中級編：ブログサイト　デモ
69https://code-step.com/demo/html/blog/
70*/
71#header {
72  width: 300px;
73  height: 100%;
74  background-color: #fff;
75  padding: 40px 50px 30px 45px;
76  position: fixed;
77  top: 0;
78  /* 画面の高さが低くてメニューが隠れてしまった場合に、縦スクロールが出るよう設定 */
79  overflow-y: auto;
80}
81#header .nav-menu {
82  margin-bottom: 60px;
83}
84#header li {
85  font-size: 0.875rem;
86  padding: 8px 0;
87}
88
89/*-------------------------------------------
90Video
91-------------------------------------------*/
92/*
93動画を全画面表示
94*/
95#video {
96  width: 100%;
97  height: 100vh;
98}
99/*
100「position: fixed;」で動画を固定し、「top: -220px;」で表示位置を調整
101z-indexでマイナスを設定して、他のコンテンツの下に隠れるようにする
102*/
103#video .bg-video {
104  position: fixed;
105  top: -220px;
106  z-index: -10;
107}
108
109/*-------------------------------------------
110Project
111-------------------------------------------*/
112/* 背景に黒の透過グラデーションを設定 */
113#project {
114  background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
115  color: #fff;
116}
117#project .list {
118  display: flex;
119  justify-content: space-between;
120  flex-wrap: wrap;
121}
122#project .list li {
123  width: 47%;
124  border: solid 1px #fff;
125  margin-bottom: 50px;
126  position: relative;
127}
128/* 下段の2つはマージンを設定しない */
129#project .list li:last-child,
130#project .list li:nth-last-child(2) {
131  margin-bottom: 0;
132}
133#project .list li a {
134  display: block;
135}
136/* 疑似要素を使用して、テキストの下に「box-shadow」で影を付ける */
137#project .list li a::after {
138  content: "";
139  box-shadow: 0 -30px 15px -1px #2e2e2e inset;
140  position: absolute;
141  top: 0;
142  left: 0;
143  right: 0;
144  bottom: 0;
145}
146#project .list .name {
147  color: #fff;
148  font-size: 0.75rem;
149  position: absolute;
150  bottom: 4px;
151  left: 7px;
152  z-index: 5;
153}
154
155/*-------------------------------------------
156Feature
157-------------------------------------------*/
158/* 背景に黒の透過を設定 */
159#feature {
160  background: rgba(0, 0, 0, 0.8);
161  color: #fff;
162  padding-bottom: 80px;
163}
164#feature .list {
165  display: flex;
166  justify-content: space-between;
167}
168#feature .list li {
169  width: 30%;
170  font-size: 0.875rem;
171  text-align: center;
172}
173/*
174円を作成
175
176レスポンシブに対応した可変サイズの円を作成する場合は、
177widthに100%を設定して、paddingで上下を50%に設定
178今回は円の中にテキストが入っているのと、枠線をつけているため、
17950%から上下それぞれテキストの高さ（10px）とボーダー（1px）をマイナスしている
180
181*/
182#feature .list li a {
183  width: 100%;
184  border: solid 1px #fff;
185  border-radius: 50%;
186  color: #fff;
187  display: block;
188  padding: calc(50% - 11px) 0;
189  margin-bottom: 15px;
190  text-align: center;
191  position: relative;
192  /* ホバー時用の要素を隠すために設定 */
193  overflow: hidden;
194}
195/*
196ホバー時のスライドを疑似要素で作成
197「left: -100%;」で左側に隠しておく
198*/
199#feature .list li a::before {
200  content: "";
201  width: 100%;
202  height: 100%;
203  background-color: #fff;
204  position: absolute;
205  top: 0;
206  left: -100%;
207  opacity: 0.3;
208  transition: 0.5s;
209}
210/* ホバー時に「left: 0;」を設定して右に移動させる */
211#feature .list li a:hover::before {
212  left: 0;
213}
214#feature .list .title {
215  font-size: 1rem;
216  font-weight: bold;
217  margin-bottom: 5px;
218}
219
220/*-------------------------------------------
221Flow
222-------------------------------------------*/
223#flow {
224  background-color: #fff;
225  padding-top: 40px;
226}
227#flow .step {
228  display: flex;
229  margin-top: 60px;
230}
231#flow .figure {
232  position: relative;
233}
234/* 図形下の黄色い棒線を作成 */
235#flow .figure::before {
236  content: "";
237  width: 50px;
238  height: 600px;
239  background-color: #ffdd00;
240  position: absolute;
241  top: 0;
242  left: 75px;
243}
244/*
245図形の四角部分を作成
246*/
247#flow .figure li {
248  width: 200px;
249  height: 80px;
250  line-height: 80px;
251  background-color: #414141;
252  color: #fff;
253  font-size: 0.875rem;
254  margin-bottom: 60px;
255  position: relative;
256  text-align:center;
257}
258/*
259図形の三角部分を疑似要素で作成
260「position」を使用して、四角の下に配置
261*/
262#flow .figure li::before {
263  content: "";
264  border-top: 30px solid #414141;
265  border-left: 100px solid transparent;
266  border-right: 100px solid transparent;
267  position: absolute;
268  top: 80px;
269  right: 0;
270  left: 0;
271  margin: 0 auto;
272}
273#flow .figure li:last-child {
274  margin-bottom: 0;
275}
276#flow .description {
277  margin-left: 10%;
278}
279#flow .description dt {
280  border-bottom: solid 1px #121212;
281  font-size: 1.25rem;
282  padding-bottom: 8px;
283  margin-bottom: 10px;
284  position: relative;
285}
286/*
287丸数字を作成
288「position」を使用して、タイトルの左側に配置
289*/
290#flow .description dt span {
291  width: 35px;
292  height: 35px;
293  line-height: 35px;
294  background-color: #414141;
295  border-radius: 50%;
296  color: #fff;
297  display: block;
298  font-size: 1rem;
299  text-align: center;
300  position: absolute;
301  bottom: 0;
302  left: -45px;
303}
304#flow .description dd {
305  margin-bottom: 43px;
306}
307#flow .description dd:last-child {
308  margin-bottom: 0;
309}
310
311/*-------------------------------------------
312Contact
313-------------------------------------------*/
314#contact {
315  background-color: #fff;
316  padding-bottom: 80px;
317}
318#contact .link {
319  display: flex;
320  justify-content: space-between;
321  margin-top: 60px;
322}
323#contact .link .item {
324  width: 30%;
325  border: solid 1px #121212;
326  display: block;
327  font-size: 0.875rem;
328  position: relative;
329  padding: 50px 0;
330  text-align: center;
331  transition: 0.1s;
332}
333#contact .link .item::before {
334  content: "";
335  border-top: 20px solid transparent;
336  border-right: 20px solid #121212;
337  position: absolute;
338  right: 4px;
339  bottom: 4px;
340}
341/*
342ホバー時は枠線を太くする
343「border」ではなく「outline」を使用することで、ホバー時にレイアウトがずれるのを防ぎます。
344※詳細を知りたい方は、borderとoutlineの違いについて検索してみてください。
345*/
346#contact .link .item:hover {
347  outline: solid 3px #121212;
348}
349#contact .link .item img {
350  margin-bottom: 5px;
351}
352
353/*-------------------------------------------
354フッター
355-------------------------------------------*/
356#footer {
357  background-color: #121212;
358  color: #fff;
359  padding: 20px 0;
360}
361#footer .menu {
362  display: flex;
363  justify-content: center;
364  margin: 30px 0 60px 0;
365}
366#footer .menu li {
367  border-right: solid 1px #fff;
368  font-size: 0.875rem;
369  padding: 0 20px;
370}
371#footer .menu li:last-child {
372  border-right: none;
373}
374#footer .menu li a {
375  color: #fff;
376}
377#footer .copyright {
378  font-size: 0.75rem;
379  text-align: center;
380}
381
382/*-------------------------------------------
383トップへ戻るボタン
384-------------------------------------------*/
385/*
386右下に固定で配置
387表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
388*/
389#to-top {
390  width: 50px;
391  height: 50px;
392  background-color: #121212;
393  border: solid 1px #fff;
394  border-radius: 50%;
395  position: fixed;
396  right: 25px;
397  bottom: 25px;
398}
399/*
400中の三角は疑似要素で作成
401*/
402#to-top::after {
403  content: "";
404  border-left: 7px solid transparent;
405  border-right: 7px solid transparent;
406  border-bottom: 7px solid #fff;
407  position: relative;
408  left: 17px;
409  bottom: 3px;
410}
411