同じクラスを使いまわせないです

同じクラスを使いまわしたいです

isara様のサイト模写をしています。
header内で使用しているクラス.contactpcをmain内で使おうとすると、
header内に被って表示され、main内には表示されません。

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

HTML
1###<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="./css/style.css">
8    <title>isara.life</title>
9</head>
10<body>
11    <header>
12        <div class="header">
13            <div class="title">
14                <div class="logo">
15                    <img src="./images/isaralogo.png" alt="">
16                </div>
17                <div class="subtitle">
18                    <p>バンコクのノマドエンジニア育成講座</p>
19                </div>
20                <div class="contact">
21                    <div class="contactpc startpoint">
22                       <p class="txtxs"><a href="">お問い合わせ / 資料請求はこちら</a></p>
23                    </div> 
24                    <div class="contactsp startpoint">
25                        <img src="./images/form.png" alt="">
26                        <a href="">資料請求</a>
27                    </div>     
28                </div>
29            </div>
30        </div>
31    </header>
32    
33    <div class="key-visual">
34        <div class="key-visual-ttl">
35            <h2>プログラミングで<br>
36                人生の安定を手にいれよう</h2>
37                <div class="key-visual-logo">
38                    <img src="./images/isaralogolarge.png" alt="">
39                </div>
40            <p>バンコクのノマドエンジニア育成講座<br>
41                iSara[イサラ]</p>
42        </div>
43    </div>
44    <main>
45        <section class="sec01">
46            <h3>まずは20日間で,<br>
47                月10万円稼げるスキルを手に入れよう。
48            </h3>
49            <p>※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
50            <p class="contactpc"><a href="">お問い合わせ＆資料請求はこちら</a></p>
51            <ul>
52                <li>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</li>
53                <li>第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました</li>
54                <li>第8期生：2021年内に開催予定＊資料請求受付中です</li>
55            </ul>
56        </section>
57    </main>
58</body>
59</html>
60
61
62

CSS
1header{
2    /* position: fixed; */
3    z-index: 10;
4    background-color: #fff;
5    width: 100%;
6}
7
8.title{
9    width: 1170px;
10    max-width: calc(100% - 20px);
11    margin: 0 auto;
12    position: relative;
13    padding: 20px 0;
14    height: 35px;
15}
16
17.title .logo, .subtitle{
18    display: inline-block;
19}
20
21.logo{
22    margin: -6px;
23    position: absolute;
24    left: 6px;
25}
26
27.logo img{
28    display: block;
29    width: 128px;
30    bottom: 10px;
31}
32
33.subtitle{
34    position: relative;
35    bottom: -14px;
36    left: 135px;
37}
38
39.subtitle p{
40    font-weight: 600;
41    margin-top: 0;
42    margin-bottom: 0;
43    letter-spacing: 1px;
44    
45}
46
47.headcontact:last-child{
48    margin-left: auto;
49}
50
51.contactpc a{
52    cursor: pointer;
53    position: absolute;
54    right: 0px;
55    top: 16px;
56    padding: 11px 40px;
57    background-color: #da6b64;
58    border-radius: 25px;
59    text-decoration: none;
60    color: #fff;
61    letter-spacing: 1.5px;
62}
63
64.contactpc a:hover{
65    background-color: #d84940;
66}
67
68.contactsp{
69    display: none;
70}
71
72.key-visual{
73    background: url("../images/main.jpg") no-repeat center center / cover;
74    height: 500px;
75    position: relative;
76}
77
78.key-visual-ttl{
79    position: absolute;
80    top: 50%;
81    width: 100%;
82    text-align: center;
83    transform: translateY(-50%);
84}
85
86.key-visual-ttl h2{
87    font-size: 28px;
88    line-height: 2em;
89}
90
91.key-visual-logo img{
92    width: 300px;
93}
94
95.key-visual-ttl p{
96    font-size: 20px;
97    line-height: 1em;
98}
99
100.sec01{
101    background-color: #ebba4d;
102    color: #fff;
103    text-align: center;
104}
105
106.sec01 h3{
107    font-size: 20px;
108}
109
110.sec01 ul{
111    font-size: 20px;
112    list-style: none;
113}