レスポンシブを組むとPC版まで影響を受けてしまう

前提・実現したいこと

PCはPCのレイアウトを、スマホはスマホのレイアウトを適用したいです。
ご教授頂けますと幸いです。

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

PC版のレイアウトが適用されない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="UTF-8">
6 <title>サンプルページ</title>
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <meta name="viewport" content="width=device-width,initial-scale=1">
10 <link rel="stylesheet" href="CSS/responsive.css">
11
12
13</head>
14
15<body>
16 <header>
17  <div class="header-wrapper title wrapper">
18   <div class="header-top ">
19    <h1>はじめてのコーディング</h1>
20   </div>
21   <div class="top-message title">
22    <img class="top-image" src="images/kv-img.jpg">
23    <p class="top">コーディングを学習して、<br>オリジナルサイトを作成しよう</p>
24   </div>
25   <h2>はじめに</h2>
26   <div class="header-text">
27    <p>このサイトはコーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイトを「使える状態」にすることです。</p>
28   </div>
29  </div>
30 </header>
31
32 <div class="content-wrapper title wrapper">
33  <div class="kokorogamae ">
34   <h2>学習の心構え</h2>
35   <div class="content-text">
36    <p>暗記しようとしない</p><br>
37    <p>反復練習する</p><br>
38    <p>習得するまでコピペ禁止</p><br>
39    <p>1回で理解できなくても気にしない</p><br>
40   </div>
41  </div>
42
43
44  <div class-="content wrapper">
45   <h2>学習すること</h2>
46
47   <div class="container">
48    <div class="items HTML5">
49     <img src="images/icon_html.jpg">
50     <p class="contents">HTML5</p>
51    </div>
52
53    <div class="items CSS3">
54     <img src="images/icon_css.jpg">
55     <p class="contents">CSS3</p>
56    </div>
57
58    <div class="items js">
59     <img src="images/icon_js.jpg">
60     <p class="contents">JavaScript/Jquery</p>
61    </div>
62   </div>
63
64  </div>
65 </div>
66
67
68
69 <a href="#" class="button">Webサイトを見る</a>
70
71 <footer>
72  <p>@2020cresta.design</p>
73 </footer>
74
75
76
77</body>
78
79</html>
80

該当のソースコード

CSS
1@meta charset="utf-8";
2
3@import "variables";
4
5
6/*全体のレイアウト*/
7html {
8 width: 100%;
9 text-align: center;
10 font-family: $font;
11 box-sizing: border-box;
12}
13
14/*共通レイアウト　表題*/
15.title h2 {
16 color: $orange;
17 font-size: 2.5vw;
18 font-weight: 500px;
19 margin-top: 100px;
20 margin-bottom: 50px;
21}
22
23/*共通レイアウト　各項目余白*/
24.wrapper {
25 margin-bottom: 100px;
26 width: auto;
27}
28
29
30
31/*メインタイトル*/
32.header-top {
33 background-color: $orange;
34 height: 3vw;
35 color: $white;
36 text-align: center;
37 font-size: 33px;
38 line-height: 16px;
39 font-weight: bold;
40 padding: 30px;
41}
42
43/*親：トップ　背景画像*/
44.top-image {
45 height: 300px;
46 position: relative;
47 width: 100%;
48
49}
50
51/*子：画像上テキスト　配置*/
52.top-message p {
53 position: absolute;
54 color: white;
55 top: 30%;
56 left: 35%;
57 text-align: center;
58 font-size: 33px;
59}
60
61/*中央ぞろえ　かつ　左寄せ*/
62.header-text {
63 text-align: left;
64 display: inline-block;
65 line-height: 30px;
66}
67
68
69
70/*コンテンツ部　背景色*/
71.kokorogamae {
72 background-color: #f0f0f0;
73 padding-bottom: 100px;
74 padding-top: 30px;
75 box-sizing: border-box;
76}
77
78
79/*コンテンツ部　横ならべ*/
80.container {
81 display: flex;
82 justify-content: center;
83 align-items: center;
84
85 img {
86  width: 40%;
87  height: auto;
88 }
89
90 p {
91  text-align: start;
92  margin-left: 30%;
93 }
94}
95
96/*コンテンツ部　各三つの要素のレイアウト*/
97
98/*コンテンツ部　コンテンツ間余白調整*/
99.CSS3 {
100 margin-right: -170px;
101 margin-left: -170px;
102}
103
104/*コンテンツ部　各三つの要素のテキスト部　レイアウト*/
105.items {
106 margin: 0 auto;
107 font-weight: bold;
108}
109
110/*コンテンツ部　背景*/
111.content-wrapper {
112 width: 100%;
113}
114
115
116/*コンテンツ部　ボタンレイアウト*/
117.button {
118 width: 150px;
119 font-size: 15px;
120 text-decoration: none;
121 display: block;
122 text-align: center;
123 padding: 12px 0 12px;
124 background-color: $orange;
125 color: $white;
126 outline: 0;
127 text-align: center;
128 display: inline-block;
129 margin-top: 50px;
130 margin-bottom: 200px;
131}
132
133/*コンテンツ部　ボタン　テキスト*/
134.content p .button {
135 font-weight: bold;
136}
137
138
139
140
141/*フッター部　レイアウト設定*/
142footer {
143 background-color: darkslategray;
144 height: 5px;
145 padding-top: 15px;
146 padding-bottom: 15px;
147 color: $white;
148 font-size: 8px;
149}
150

該当のソースコード

CSS
1/*モバイル向けデザイン*/
2
3/*----------以下、レスポンシブデザイン------------------*/
4
5
6@media screen and (max-width: 768px) {
7
8
9 .header-top {
10  height: 3vw;
11  font-size: 150%;
12 }
13
14 .top {
15  font-size: 200%;
16 }
17
18 .title h2 {
19  font-size: 100%;
20 }
21
22 .top-message p {
23  top: 25%;
24  left: 15%;
25  font-size: 120%;
26  line-height: 120%;
27 }
28
29 .header-text {
30  text-align: center;
31 }
32
33 .container {
34  display: block;
35 }
36
37 .CSS3 {
38  margin: 10% 0;
39 }
40
41
42}
43