スマホ用のレスポンシブが効きません

スマホ用のレスポンシブで、header-rightをdisplay:none;にしたり、bodyのwidthを変更したいのですが、どれも反映されません。よろしくお願いします。
コードの量が多すぎるので、bodyとheaderの部分だけ貼ります。
コンパイルはしてあります。

<index.html>

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
6		<meta name="viewpoint" content="width=device-width,initial-scale=1">
7		<link rel="stylesheet" href="css/iSara.css">
8		<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9		<link rel="stylesheet" href="responsive/responsive.css">
10	</head>
11	<body>
12		<div class="page-top" id="back-to-top">
13			<i class="fas fa-chevron-up page-top-icon"></i>
14		</div>
15		<header>
16			<div class="header-left">
17				<img src="image/isaralogo.png">
18				<p>バンコクのノマドエンジニア育成講座</p>
19			</div>	
20			<div class="header-right">
21				<a href="#contact-id" class="form-jump">お問い合わせ / 資料請求はこちら</a>
22			</div>
23				
24			</div>
25		</header>
26<script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script>
27		<div id="fb-root"></div>
28		<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0&appId=496232624321738&autoLogAppEvents=1"></script>
29	</body>
30</html>

<iSara.scss>

scss
1@charset "utf-8";
2*{
3    margin:0;
4    padding:0;
5}
6body{
7	font-family: "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ W3", "Hiragino Sans", "ヒラギノ角ゴシック W3", sans-serif;
8}
9.page-top{
10	width:70px;
11	height:70px;
12	cursor: pointer;
13	position: fixed;
14	bottom: 90px;
15	right:50px;
16	background-color:#ececec;
17	.page-top-icon{
18		font-size: 34px;
19		margin:16px 0 0 21px;
20	}
21}
22header{
23	height:75px;
24	background-color:white;
25	position: fixed;
26	top:0;
27	width:100%;
28	z-index: 1000;
29	.header-left{
30		float:left;
31		margin-left:1px;
32		img{
33		height:45px;
34		width:128px;
35		margin-top: 14px;
36		margin-left:127px;
37		
38		}
39		p{
40			display: inline-block;
41			font-size: 14px;
42			letter-spacing: 1.5px;
43			font-weight: 600;
44			color:#333333;
45			vertical-align: bottom;
46			margin-left:0.5px;
47			margin-bottom:9px;
48		}
49	}
50	.header-right{
51		float:right;
52		a{
53			display: inline-block;
54			background-color:#da6b64;
55			
56			text-decoration: none;
57			color:#fff;
58			font-size: 14px;
59			font-weight:300;
60			letter-spacing:1.5px;
61			border-radius: 25px;
62			padding:11px 40.5px;
63			margin-top: 16px;
64			margin-right:127px;
65			text-align: center;
66			&:hover{
67				background-color:#d84940;
68			}
69		}
70	}
71}

<responsive.scss>

scss
1@charset "utf-8";
2@media (max-width:670px) {
3	*{
4		box-sizing: border-box;
5	}
6	body{
7		width:100%;
8	}
9	header{
10		
11		.header-right{
12			display: none;
13		}
14	.faq-list{
15		width:345px;
16		.faq-list-item{
17			width:100%;
18		}
19	}
20	}
21}

現在の状態

thyda.eiqau

2020/02/16 04:48

responsive/responsive.css がブラウザ上で読み込まれていることは確認済みですか？

reo_fukkase

2020/02/16 05:06

「ページのソースを表示」から確認したところ、<link rel="stylesheet" href="responsive/responsive.css">は読み込まれているようでした。

thyda.eiqau

2020/02/16 07:06

開発者ツールのSourcesのタブもしくはNetworkのタブで内容が確認できる状態という理解で大丈夫でしょうか。あと、Chromeのモバイル表示シミューレーターは、ボタンを押しただけでは画面の描画は更新されず、モバイル表示の状態でF5等でリロードする必要がありますが、そのあたりはご認識されていますか。幅670pxしか条件がないのであればモバイル表示にしなくても、通常のChromeの表示でウィンドウ幅を狭めれば確認できると思いますが、ブラウザのウィンドウ幅を細くしても670px未満用の表示にならないということでしょうか。

reo_fukkase

2020/02/16 07:58

検証のsourcesにはresponsiveのcssとscssがありました。モバイルの状態で、command＋Rをおすということでしょうか？確かに、画面を狭めると、しっかりheader-rightのdisplay:none;などが効きました。検証画面をみながらやる方法としては、そのリロードをする必要があるということでしょうか？「現在の状態」で添付した画像は、iphone6/7/8にしても、例えば、bodyのwidthが980であったりします。スマートフォンの表示にすれば、画面が小さくなるのではみ出るのかと思ったのですが。

thyda.eiqau

2020/02/16 16:45

> 検証画面をみながらやる方法としては、そのリロードをする必要があるということでしょうか？はい。PC向けの表示の状態で、検証画面を開いただけではモバイル向けの表示にはなりません。リロードが必要です。

reo_fukkase

2020/02/17 04:08

command＋Rでリロードしましたが、表示は変わりませんでしたボタンなど、横幅が大きいものに合わせて全体のwidthも広がってしまっているのでしょうか？正しくスマホ用の画面表示になっているなら、横幅が大きいものは、画面からはみ出て表示されると思うのですが、こうはならないということは、これはやっぱりスマホの画面表示になっていないということでしょうか？

thyda.eiqau

2020/02/17 04:45

スマホ実機で確認するとどうなるのですか？

reo_fukkase

2020/02/18 06:58

web上にこの模写をアップしてスマートフォンで見るということでしょうか？現在はisara.lifeのPC版の模写が終わってそれをレスポンシブしようとしている段階です。模写したものは、web上にアップしいても良いのですか？