HTML CSS を実践で使う際の見栄えや書き方

お疲れさまです、お世話になります。

今回はHTML・CSSの実践での"見栄えや書き方"についてご教示お願いします
まだまだ本質のプログラミングは初心者レベルから抜け出せない新参者ですが
モチベーションと気にしいな性格が相まり気になったので「まずはプログラミングからやろ」等は控えめに
ご教示よろしくおねがいします......。

"Progate"さんで少しずつ学んでいますが先日「腕試し」という形で０からコードを書く場面があったので
"コードの見やすさ"が気になりました。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ヘッダー -->
10    <div class="header">
11      <div class="header-logo">
12        <p>Progate</p>
13      </div>
14      <div class="header-list">
15        <ul>
16          <li>プログラミングとは</li>
17          <li>学べるレッスン</li>
18          <li>お問い合わせ</li>
19        </ul>
20      </div>
21    </div>
22    
23    <!--  メイン  -->
24    <div class="main">
25      <h1>HELLOWORLD<span>.</span></h1>
26      <h2>プログラミングの世界へようこそ</h2>
27      <div class="container">
28        <h3>学べるレッスン</h3>
29        <div class="contents">
30          <div class="content">
31            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" />
32            <p>HTML ＆CSS</p>
33          </div>
34          <div class="content">
35            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" />
36            <p>PHP</p>
37          </div>
38          <div class="content">
39            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" />
40            <p>Ruby</p>
41          </div>
42          <div class="content">
43            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" />
44            <p>Swift</p>
45          </div>
46        </div>
47      </div>
48      <div>
49        <div class="contact-form">
50          <h3>お問い合わせ</h3>
51          <p>メールアドレス（必須）</p>
52          <input/>
53          <p>お問い合わせ内容（必須）</p>
54          <textarea></textarea>
55          <p>※必須項目は必ずご入力ください</p>
56          <input class="contact-submit" type="submit" value="送信" />
57        </div>
58      </div>
59    </div>
60  </body>
61</html>

CSS
1.header {
2  height: 90px;
3  color: white;
4  background-color: #26d0c9;
5  display: flex;
6}
7
8.header-logo {
9  font-size: 36px;
10  padding: 20px 40px;
11}
12
13.header-list li {
14  padding: 33px 20px;
15}
16
17.header-list ul {
18  display: flex;
19}
20
21.main {
22  padding-top: 100px;
23  padding-left: 80px;
24}
25
26.main h1 {
27  font-size: 140px;
28}
29
30 .main span {
31   color: #ff4a4a;
32 }
33 
34 .main h2 {
35   font-size: 60px;
36 }
37 
38 .container {
39   padding-top: 100px;
40   padding-bottom: 100px;
41 }
42 
43 .container h3 {
44   font-size: 28px;
45   border-bottom: 2px solid #dee7ec ;
46   padding-bottom: 15px;
47   margin-bottom: 50px;
48 }
49 
50 .contents {
51   display: flex;
52 }
53 
54 .content {
55   padding-right: 40px;
56 }
57
58.content p {
59  font-size: 24px;
60}
61
62.contact-form {
63  padding-bottom: 100px;
64  padding-top: 100px;
65}
66
67.contact-form h3 {
68  font-size: 28px;
69  padding-bottom: 15px;
70  margin-bottom: 50px;
71  border-bottom: 2px solid #dee7ec;
72}
73
74.contact-form input , textarea {
75  border: 1px solid #dee7ec;
76  width: 400px;
77  padding: 20px;
78  margin-top: 10px;
79  margin-bottom: 30px;
80}
81
82.contact-submit {
83  background-color: #dee7ec;
84  color: #889eab;
85  font-size: 18px;
86}
87