レスポンシブ　@mediaが効かない

HTML CSSを使ってisaraのサイトを模写練習中です。

レスポンシブのテストで下記コードを書いてみたのですが、スマホ表示にしても一切変化が見られません。
原因と改善策を教えて頂きたいです。
お願いします。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
6    <title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
7    <link rel="stylesheet" href="stylesheet.css">
8    <link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">
9    <link rel="icon" href="img/favicon.ico">
10    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
12     <script type="text/javascript" src="js/script.js"></script>
13    <script src="https://kit.fontawesome.com/646ee2a69d.js" crossorigin="anonymous"></script>
14
15  </head>
16  <body>
17    <div class="all-container">
18
19
20    <div class="top-wrapper">
21        <div  class="header">
22          <div class="title">
23            <div class="header-left">
24              <p><img class="logo" src="img/isaralogo.png" alt="イサラのロゴ">
25バンコクのノマドエンジニア育成講座</p>
26            </div>
27            <div class="header-right">
28              <div id="header-btn" ><p>お問い合わせ / 資料請求はこちら</p></div>
29            </div>
30          </div>
31        </div>

css
1* {
2  margin:0;
3  padding:0;
4}
5
6
7
8
9@media (max-width: 670px ){
10  .header{
11    background-color: black;
12  }
13}
14
15.header {
16  height: 75px;
17  background-color: white;
18  position:fixed;
19    z-index: 50;
20
21  .title{
22    height: 75px;
23    display: flex;
24    margin:0 364.58px;
25  }
26
27}
28

行動規範の内容に同意します

回答2件

ベストアンサー

画面幅でbackground-colorが切り替わっていないのは、
cssは基本的に後に書いているものが優先されるからです。

なので、開発者ツールなどで見ればわかりますが、
画面幅を小さくすると、background-color: blackに取り消し線がついていると思います。

やりたいことを実現するには

css
1.header {
2            height: 75px;
3            background-color: white;
4            position: fixed;
5            z-index: 50;
6        }
7@media (max-width: 670px) {
8            .header {
9                background-color: black;
10            }
11        }
12

このように後ろに書くか、

css
1@media (max-width: 670px) {
2            .header {
3                background-color: black !important;
4            }
5        }
6
7        .header {
8            height: 75px;
9            background-color: white;
10            position: fixed;
11            z-index: 50;
12        }