リロードした後と、ライブプレビューを開きなおした後で表示が異なるのですがどちらを信用したらよいですか？　解決法は？

前提・実現したいこと

以下にある通り、プレビューの見方によってレイアウトが異なるので、どちらを頼りに修正したらよいかわかりません????
言語の質問になるかどうかは際どいところですが、大変困っています。
どうぞご教授お願い致します。

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

CSSなどを編集した後に「すべて保存」→開いてあったプレビューリロード
→きれいに見える

CSSなどを編集した後に「すべて保存」→新しくプレビュー再起動
→崩れている

該当のソースコード

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

該当のソースコード

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

該当のソースコード（レスポンシブ）

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-image {
23  height: 200px;
24 }
25
26 .top-message p {
27  top: 20%;
28  left: 18%;
29  font-size: 120%;
30  line-height: 120%;
31 }
32
33 .header-text {
34  text-align: center;
35 }
36
37 .container {
38  display: block;
39 }
40
41 .CSS3 {
42  margin: 10% 0;
43 }
44
45
46}
47