cssの一部を変更したいです

前提・実現したいこと

.headerでbackground-color: turquoise;にしたいです。
この前はbackground-color: purple;にしていました。
他の指定は反映されるのですが、background-color: turquoise;だけが反映されず、前に指定した色が残ったままです。

vscodeを使用していて、Live Sass Compilerでscssをcssに変換し、cssでもbackground-color: turquoise;になっていることを確認しました。
chromeでスーパーリロードもしてみましたが変わりません。

<body>タグの上に<link rel="stylesheet" href="css/header.css">と記入しています。

この場合、何がおかしいのかご教示いただけると幸いです。

該当のソースコード

html
1<header class="header">
2    <div class="header_logo">
3      <a href="">
4        <img src="img/logo.jpg" alt="Engress">
5      </a>
6    </div>
7    <nav class="header_nav">
8      <div class="ham"><a href=""><span class="ham-line ham-line1"></span><span class="ham-line ham-line2"></span><span
9            class="ham-line ham-line3"></span></a></div>
10      <ul class="header_list">
11        <li class="header_list-item"><a href="" class="p">1</a></li>
12        <li class="header_list-item"><a href="" class="p">2</a></li>
13        <li class="header_list-item"><a href="" class="p">3</a></li>
14        <li class="header_list-item"><a href="" class="p">4</a></li>
15      </ul>
16      <div class="header_right">
17        <div class="tel-box">
18          <small class="tel-hour">open</small>
19          <p class="tel-number"><a href="tel:+81-90-0000-0000" class="p">000-0000-0000</a></p>
20        </div>
21        <div class="square-request-btn header-btn"><a href=""><span class="square-request-btn-text">資料請求</span></a>
22        </div>
23        <div class="contact-btn header-btn"><a href=""><span class="contact-btn-text">お問い合わせ</span></a></div>
24      </div>
25    </nav>
26  </header>

scss
1@charset 'utf-8';
2
3//style.scss
4
5/*
6html5doctor.com Reset Stylesheet
7v1.6.1
8Last Updated: 2010-09-17
9Author: Richard Clark - http://richclarkdesign.com
10Twitter: @rich_clark
11*/
12
13html,
14body,
15div,
16span,
17object,
18iframe,
19h1,
20h2,
21h3,
22h4,
23h5,
24h6,
25p,
26blockquote,
27pre,
28abbr,
29address,
30cite,
31code,
32del,
33dfn,
34em,
35img,
36ins,
37kbd,
38q,
39samp,
40small,
41strong,
42sub,
43sup,
44var,
45b,
46i,
47dl,
48dt,
49dd,
50ol,
51ul,
52li,
53fieldset,
54form,
55label,
56legend,
57table,
58caption,
59tbody,
60tfoot,
61thead,
62tr,
63th,
64td,
65article,
66aside,
67canvas,
68details,
69figcaption,
70figure,
71footer,
72header,
73hgroup,
74menu,
75nav,
76section,
77summary,
78time,
79mark,
80audio,
81video {
82  margin: 0;
83  padding: 0;
84  border: 0;
85  outline: 0;
86  font-size: 100%;
87  vertical-align: baseline;
88  background: transparent;
89}
90
91body {
92  line-height: 1;
93}
94
95article,
96aside,
97details,
98figcaption,
99figure,
100footer,
101header,
102hgroup,
103menu,
104nav,
105section {
106  display: block;
107}
108
109nav ul {
110  list-style: none;
111}
112
113blockquote,
114q {
115  quotes: none;
116}
117
118blockquote:before,
119blockquote:after,
120q:before,
121q:after {
122  content: '';
123  content: none;
124}
125
126a {
127  margin: 0;
128  padding: 0;
129  font-size: 100%;
130  vertical-align: baseline;
131  background: transparent;
132}
133
134/* change colours to suit your needs */
135ins {
136  background-color: #ff9;
137  color: #000;
138  text-decoration: none;
139}
140
141/* change colours to suit your needs */
142mark {
143  background-color: #ff9;
144  color: #000;
145  font-style: italic;
146  font-weight: bold;
147}
148
149del {
150  text-decoration: line-through;
151}
152
153abbr[title],
154dfn[title] {
155  border-bottom: 1px dotted;
156  cursor: help;
157}
158
159table {
160  border-collapse: collapse;
161  border-spacing: 0;
162}
163
164/* change border colour to suit your needs */
165hr {
166  display: block;
167  height: 1px;
168  border: 0;
169  border-top: 1px solid #cccccc;
170  margin: 1em 0;
171  padding: 0;
172}
173
174input,
175select {
176  vertical-align: middle;
177}
178
179// reset CSS ここまで
180
181@function vw($width, $px) {
182  @return $px / $width * 100vw;
183}
184
185@function vh($height, $px) {
186  @return $px / $height * 100vh;
187}
188
189$sp: 375px; // スマホ
190$ipad: 768px; // iPad
191$spc: 1280px; // PC通常
192$bpc: 1600px; // PC大画面
193
194@mixin sp {
195  @media (min-width: ($sp)) {
196    @content;
197  }
198}
199
200@mixin ipad {
201  @media (min-width: ($ipad)) {
202    @content;
203  }
204}
205
206@mixin spc {
207  @media (min-width: ($spc)) {
208    @content;
209  }
210}
211
212@mixin bpc {
213  @media (min-width: ($bpc)) {
214    @content;
215  }
216}
217
218$navyBlue: #1B224C;
219$yellowOrange: #F5A623;
220$thinGray: #D5D5D5;
221$moreThinGray: #F8F8F8;
222
223html {
224  font-size: 62.5%;
225  /* -> 10px; */
226}
227
228body {
229  font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
230  ;
231}
232
233h1 {
234  font-size: 4.8rem;
235  font-weight: bold;
236  line-height: 1.4;
237}
238
239h2 {
240  font-size: 3.6rem;
241  font-weight: bold;
242  line-height: 1.4;
243}
244
245h3 {
246  font-size: 3.2rem;
247  font-weight: bold;
248  line-height: 1.7;
249}
250
251h4 {
252  font-size: 2.6rem;
253  font-weight: bold;
254  line-height: 1.5;
255}
256
257h5 {
258  font-size: 1.8rem;
259  font-weight: 200;
260  line-height: 1.7;
261}
262
263p,
264.p {
265  font-size: 1.6rem;
266  font-weight: 200;
267  line-height: 1.7;
268}
269
270small {
271  font-size: 1.2rem;
272  font-weight: 200;
273  line-height: 1.7;
274}
275
276a {
277  text-decoration: none;
278}
279
280ul {
281  list-style: none;
282}
283
284.container {
285  margin: 0 auto;
286  width: 100%;
287
288  @include sp {
289    width: vw(1280, 900);
290  }
291
292  @include bpc {
293    max-width: 1600px;
294  }
295}
296

scss
1
2//header.scss
3
4@charset "utf-8";
5
6@import 'style.scss';
7
8.header {
9  display: flex;
10  height: 8rem;
11  width: 100vw;
12  background-color: turquoise;
13}
14
15.header_logo {
16  a {
17    img {
18      width: 13.6rem;
19      height: 2.7rem;
20    }
21  }
22}
23
24.header_nav {
25  display: flex;
26  width: 100%;
27}
28
29.ham {
30  display: none;
31
32  a {
33    .ham-line {}
34
35    .ham-line1 {}
36
37    .ham-line2 {}
38
39    .ham-line3 {}
40  }
41}
42
43.header_list {
44  display: flex;
45}
46
47.header_list-item {
48  a {}
49}
50
51.header_right {
52  display: flex;
53  margin-left: auto;
54}
55
56.tel-box {}
57
58.tel-hour {}
59
60.tel-number {
61  a {}
62}
63
64.header-btn {
65  font-size: 1.4rem;
66  font-weight: bold;
67  line-height: 1.7;
68}
69
70.square-request-btn {
71  background-color: $yellowOrange;
72}
73
74.contact-btn {
75  background-color: $navyBlue;
76}

css
1//header.css
2
3@charset "UTF-8";
4/*
5html5doctor.com Reset Stylesheet
6v1.6.1
7Last Updated: 2010-09-17
8Author: Richard Clark - http://richclarkdesign.com
9Twitter: @rich_clark
10*/
11html,
12body,
13div,
14span,
15object,
16iframe,
17h1,
18h2,
19h3,
20h4,
21h5,
22h6,
23p,
24blockquote,
25pre,
26abbr,
27address,
28cite,
29code,
30del,
31dfn,
32em,
33img,
34ins,
35kbd,
36q,
37samp,
38small,
39strong,
40sub,
41sup,
42var,
43b,
44i,
45dl,
46dt,
47dd,
48ol,
49ul,
50li,
51fieldset,
52form,
53label,
54legend,
55table,
56caption,
57tbody,
58tfoot,
59thead,
60tr,
61th,
62td,
63article,
64aside,
65canvas,
66details,
67figcaption,
68figure,
69footer,
70header,
71hgroup,
72menu,
73nav,
74section,
75summary,
76time,
77mark,
78audio,
79video {
80  margin: 0;
81  padding: 0;
82  border: 0;
83  outline: 0;
84  font-size: 100%;
85  vertical-align: baseline;
86  background: transparent;
87}
88
89body {
90  line-height: 1;
91}
92
93article,
94aside,
95details,
96figcaption,
97figure,
98footer,
99header,
100hgroup,
101menu,
102nav,
103section {
104  display: block;
105}
106
107nav ul {
108  list-style: none;
109}
110
111blockquote,
112q {
113  quotes: none;
114}
115
116blockquote:before,
117blockquote:after,
118q:before,
119q:after {
120  content: '';
121  content: none;
122}
123
124a {
125  margin: 0;
126  padding: 0;
127  font-size: 100%;
128  vertical-align: baseline;
129  background: transparent;
130}
131
132/* change colours to suit your needs */
133ins {
134  background-color: #ff9;
135  color: #000;
136  text-decoration: none;
137}
138
139/* change colours to suit your needs */
140mark {
141  background-color: #ff9;
142  color: #000;
143  font-style: italic;
144  font-weight: bold;
145}
146
147del {
148  text-decoration: line-through;
149}
150
151abbr[title],
152dfn[title] {
153  border-bottom: 1px dotted;
154  cursor: help;
155}
156
157table {
158  border-collapse: collapse;
159  border-spacing: 0;
160}
161
162/* change border colour to suit your needs */
163hr {
164  display: block;
165  height: 1px;
166  border: 0;
167  border-top: 1px solid #cccccc;
168  margin: 1em 0;
169  padding: 0;
170}
171
172input,
173select {
174  vertical-align: middle;
175}
176
177html {
178  font-size: 62.5%;
179  /* -> 10px; */
180}
181
182body {
183  font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
184}
185
186h1 {
187  font-size: 4.8rem;
188  font-weight: bold;
189  line-height: 1.4;
190}
191
192h2 {
193  font-size: 3.6rem;
194  font-weight: bold;
195  line-height: 1.4;
196}
197
198h3 {
199  font-size: 3.2rem;
200  font-weight: bold;
201  line-height: 1.7;
202}
203
204h4 {
205  font-size: 2.6rem;
206  font-weight: bold;
207  line-height: 1.5;
208}
209
210h5 {
211  font-size: 1.8rem;
212  font-weight: 200;
213  line-height: 1.7;
214}
215
216p,
217.p {
218  font-size: 1.6rem;
219  font-weight: 200;
220  line-height: 1.7;
221}
222
223small {
224  font-size: 1.2rem;
225  font-weight: 200;
226  line-height: 1.7;
227}
228
229a {
230  text-decoration: none;
231}
232
233ul {
234  list-style: none;
235}
236
237.container {
238  margin: 0 auto;
239  width: 100%;
240}
241
242@media (min-width: 375px) {
243  .container {
244    width: 70.3125vw;
245  }
246}
247
248@media (min-width: 1600px) {
249  .container {
250    max-width: 1600px;
251  }
252}
253
254.header {
255  display: -webkit-box;
256  display: -ms-flexbox;
257  display: flex;
258  height: 8rem;
259  width: 100vw;
260  background-color: turquoise;
261}
262
263.header_logo a img {
264  width: 13.6rem;
265  height: 2.7rem;
266}
267
268.header_nav {
269  display: -webkit-box;
270  display: -ms-flexbox;
271  display: flex;
272  width: 100%;
273}
274
275.ham {
276  display: none;
277}
278
279.header_list {
280  display: -webkit-box;
281  display: -ms-flexbox;
282  display: flex;
283}
284
285.header_right {
286  display: -webkit-box;
287  display: -ms-flexbox;
288  display: flex;
289  margin-left: auto;
290}
291
292.header-btn {
293  font-size: 1.4rem;
294  font-weight: bold;
295  line-height: 1.7;
296}
297
298.square-request-btn {
299  background-color: #F5A623;
300}
301
302.contact-btn {
303  background-color: #1B224C;
304}
305/*# sourceMappingURL=header.css.map */

補足情報（FW/ツールのバージョンなど）

scssで書いています。

追記

画面のスクショです。

![]

itagagaki

2021/04/28 01:24

ちゃんとターコイズで表示されましたよ。

K_3578

2021/04/28 01:26

保存もされてるのに色だけ変わらないのか、Chromeのデベロッパーツールでcssが反映されているかは確認されましたか？

Lhankor_Mhy

2021/04/28 01:27 編集

お試しいただきたいことがあります。デベロッパーズツールの「Elements」を開き、 <link rel="stylesheet" href="css/header.css"> の、　　　　　　　　　　　　　　↑ここを右クリックして「Open in new tab」をクリックするとどうなりますか？

seakai

2021/04/28 03:34

デベロッパーズツールの「Elements」を開き、 <link rel="stylesheet" href="css/header.css"> の、　　　　　　　　　　　　　　↑ここを右クリックして「Open in new tab」をクリックするとどうなりますか？ → background-color: turquoise;となっています。ですが追記の画像の通り、画面はpurpleのままなんです。。

itagagaki

2021/04/28 03:50

デベロッパーズツールのElementsペインで <header class="header"> の行を選択したとき、Stylesペインに.headerのスタイルはどのように表示されていますか？そこでも background-color: turquoise; になっていますか？

seakai

2021/04/28 04:05

デベロッパーズツールのElementsペインで <header class="header"> の行を選択したとき、Stylesペインに.headerのスタイルはどのように表示されていますか？そこでも background-color: turquoise; になっていますか？ →そこではbackground-color: purple;になっています。

itagagaki

2021/04/28 04:29

そこが問題ですね。とりあえず css/header.css は本当に読み込まれていると仮定して… スタイルを設定しているのは css/header.css だけなんでしょうか。他にも何かCSSを読み込んでいたり、あるいはHTMLファイル内に何かCSSを書いていたりしていないでしょうか。どこかでpurpleを指定しているところがある気がするので、それを探しましょう。

seakai

2021/04/28 04:46

できました！他にも読み込んでいるcssがあり、他のcssに影響があったみたいです。「purple」で検索して「turquoise」と置換するとturquoiseになりました。ありがとうございます。