レスポンシブ対応が効かない！

Question

前提・実現したいこと

PCファーストで、レスポンシブ対応させたいです。
レスポンシブ対応を実装している途中で、viewportも書いて、メディアクエリを書く順番も正しいと思うのですが、うまく表示できません。
PCファーストで書いていて、@media screen and (max-width: 959px) のcssは反映されるのですが、@media screen and (max-width: 480px) のcssは反映されません。

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

PCファーストで書いていて、@media screen and (max-width: 959px) のcssは反映されるのですが、@media screen and (max-width: 480px) のcssは反映されません。

該当のソースコード

@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	border-collapse: collapse;
}


textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}

html {

}

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* 上の部分は気にせずここから書く */

	#top p {
		width: 980px;
		margin: auto;
	}

	.logo {
		width: 980px;
		margin: auto;
	}

	.logo img {
		width: 260px;
	}

	#header {
		margin-top: 20px;
	}

	#header ul{
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #001754;
		color: #fff;
		font-size: 15px;
		list-style-type: none;
	}

	#header ul li {
		width: 245px;
		text-align: center;
		border-left: 1px solid #fff;
	}

	#header li + li {
		border-left: 1px solid #fff;
	}

	#header li:last-child {
		border-right: 1px solid #fff;
	}

	.main_side {
		display: flex;
		justify-content: center;
	}

	.main {
		width: 700px;

	}

	.title {
		margin: 20px 0 10px 0;
		font-size: 20px;
		color: #fff;
		background-color: #001754;
	}

	.service {
		width: 700px;
		display: flex;
		justify-content: space-between;
	}

	.image_1 {
		width: 203px;
	}

	.image_1 img {
		width: 203px;
	}

	.image_1 h1 {
		font-size: 18px;
		margin:10px;
		text-align: center;
	}

	.image_1 p {
		font-size: 15px;
		margin-bottom: 30px;
	}

	.contents ul {
		list-style-type: disc;
		margin-left: 24px;
		margin-bottom: 30px;
	}

	.sub {
		margin-bottom: 40px;
	}

	.sub h1 {
		color: #001754;
		font-size: 18px;
		border-bottom: solid 2px #000;
	}

	.sub h2 {
		margin: 20px 0 30px 0;
	}

	.sub h2 span {
		font-weight: bold;
	}

	.sub ul {
		list-style-type: none;
		display: flex;
		margin-left: 0;
	}

	.phone {
		display: none;
	}

	.contents ol {
		list-style-type: decimal;
		margin-left: 24px;
		margin-bottom: 60px;
	}

	.side {
		float: right;
		margin-top: 10px;
	}

	.side img {
		width: 260px;
		height: 100px;
		margin: 10px;
	}

	#footer {
		background-color: #001754;
		font-size: 13px;
		color: #fff;
		margin-top: 10px;
	}

	#footer p {
		text-align: center;
		padding: 5px;
	}

	.under_line {
		position: absolute;
		top: 1090px;
		border-top: solid 2px #000;
		z-index: 1;
		width: 100%;
	}

	.form-title {
		display: none;
	}

	.form-label {
		display: none;
	}

	.phone-only {
		display: none;
	}

	.submit {
		display: none;
	}


@media screen and (max-width: 959px) {

	#top p {
		width: 60%;
		font-size: 12px;
	}

	.logo img {
		width: 30%;
	}

	#header {
		margin-top: 20px;
	}

	#header ul{
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #001754;
		color: #fff;
		font-size: 15px;
		list-style-type: none;
	}

	#header ul li {
		width: 25%;
		text-align: center;
		border-left: 1px solid #fff;
	}

	#header li + li {
		border-left: 1px solid #fff;
	}

	#header li:last-child {
		border-right: 1px solid #fff;
	}

	.main_side {
		display: flex;
		justify-content: center;
	}

	.main {
		width: 75%;

	}

	.title {
		margin: 20px 5% 10px 5%;
		font-size: 18px;
		color: #fff;
		background-color: #001754;
	}

	.service {
		width: 90%;
		margin: 0 5%;
		display: flex;
		justify-content: space-between;
	}

	.image_1 {
		width: 30%;
	}

	.image_1 img {
		width: 100%;
	}

	.image_1 h1 {
		font-size: 14px;
		margin:10px;
		text-align: center;
	}

	.image_1 p {
		font-size: 13px;
		margin-bottom: 30px;
	}

	.contents ul {
		list-style-type: disc;
		margin-left: 8%;
		margin-bottom: 30px;
		font-size: 13px;
	}

	.sub {
		margin: 0 5% 40px 5%;
	}

	.sub h1 {
		color: #001754;
		font-size: 15px;
		border-bottom: solid 2px #000;
	}

	.sub h2 {
		margin: 20px 0 30px 0;
		font-size: 13px;
	}

	.sub p {
		font-size: 13px;
	}

	.sub h2 span {
		font-weight: bold;
		font-size: 13px;
	}

	.sub ul {
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		font-size: 13px;
	}

	.phone {
		display: none;
	}

	.contents ol {
		list-style-type: decimal;
		margin-left: 8%;
		margin-bottom: 60px;
		font-size: 13px;
	}

	.side {
		float: right;
		margin-top: 20px;
		margin-right: 3%;
	}

	.side img {
		width: 100%;
		height: 100px;
		margin-bottom: 3%;
	}

	#footer {
		background-color: #001754;
		font-size: 13px;
		color: #fff;
		margin-top: 10px;
	}

	#footer p {
		text-align: center;
		padding: 5px;
	}

	#footer_logo {
		border-top: solid 1px #000;
		padding-top: 1%;
	}

	.under_line {
		position: absolute;
		top: 1090px;
		border-top: solid 2px #000;
		z-index: 1;
		width: 100%;
	}

	.form-title {
		display: none;
	}

	.form-label {
		display: none;
	}

	.phone-only {
		display: none;
	}

	.submit {
		display: none;
	}
}

@media screen and (max-width: 480px) {

	#top p {
		width: 100%;
		font-weight: bold;
		font-size: 10px;
		transform: scale(0.7);
		transform-origin: left center;
	}

	.logo img {
		width: 50%;
		height: 34px;
	}

	#header ul{
		width: 100%;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #001754;
		color: #fff;
		font-size: 11px;
		list-style-type: none;
		margin-top: 10px;
	}

	#header ul li {
		width: 245px;
		text-align: center;
		border-left: 1px solid #fff;
	}

	#header li:last-child {
		border-right: 1px solid #fff;
	}

	.title {
		margin: 20px 5% 10px 5%;
		font-size: 11px;
		font-weight: bold;
		color: #fff;
		background-color: #001754;
		height: 25px;
		display: flex;
 		justify-content: flex-start;
 		align-items: center;
	}

	.image_1 {
		margin: 5%;
	}

	.image_1 img {
		width: 100%;
	}

	.image_1 h1 {
		font-size: 15px;
		font-weight: bold;
		margin: 3%;
		text-align: center;
	}

	.image_1 p {
		font-size: 14px;
	}

	.contents ul {
		list-style-type: disc;
		margin-left: 8%;
		margin-bottom: 5%;
		font-size: 11px;
	}

	.sub {
		margin: 5%;
		font-size: 11px;
	}

	.sub h1 {
		color: #001754;
		font-weight: bold;
		border-bottom: solid 1px #000;
	}

	.sub h2 {
		margin: 10px 0 15px 0;
	}

	.sub h2 span {
		font-weight: bold;
	}

	.sub ul{
		display: flex;
		flex-wrap: wrap;
		list-style-type: none;
		margin-left: 0;
	}

	.contents ol {
		font-size: 13px;
		list-style-type: decimal;
		margin-left: 8%;
		margin-bottom: 7%;
	}

	.form-title {
		font-size: 11px;
		font-weight: bold;
		color: #fff;
		background-color: #001754;
		margin-bottom: 5px;
		height: 25px;
		display: flex;
 		justify-content: flex-start;
 		align-items: center;
	}

	.phone-only {
		margin: 5px 15px 10px 15px;
		border: solid 1px silver;
	}

	.label {
		background-color: silver;
		font-size: 11px;
		font-weight: bold;
		height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.form {
		font-size: 11px;
		height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	label {
		margin-left: 2%;
	}

	#name {
		width: 40%;
		height: 20px;
		margin: 3%;
		padding: 0;
	}

	#age {
		width: 15%;
		height: 20px;
		margin: 3%;
	}

	.sex {
		width: 11px;
		height: 11px;
	}

	.cb {
		width: 11px;
		height: 11px;
	}

	#content {
		width: 95%;
		height: 130px;
		margin: 2.5%;
	}

	.submit {
		margin: 5%;
		display: flex;
		justify-content: center;

	}

	#submit-btn {
		font-size: 11px;
		margin: 10px 3% 20px 3%;
	}

	.side img {
		width: 90%;
		height: 10%;
		margin: 5px 5%;
	}

	.side {
		margin-bottom: 50px;
	}

	#footer {
		background-color: #001754;
		color: #fff;
		margin-top: 5px;
	}

	#footer p {
		padding: 5px;
		height: 10px;
		font-size: 10px;
		transform: scale(0.5);
		transform-origin: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#footer_logo {
		display: flex;
		justify-content: center;
		padding-top: 3%;
		border-top: solid 1px #000;
	}

	#footer_logo img {
		width: 50%;
	}

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ガーディアン</title>
  <link rel="stylesheet" type="text/css" href="base.css"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
  <div id="top">
    <p>WEB戦略、CMS構築、ホームページ制作・効果アップなら東京のガーディアン</p>
  </div>

  <div class="logo">
    <img src="images/logo.jpg" alt="ロゴ">
  </div>

  <div id="header">
    <ul>
      <li>ナビ１</li>
      <li>ナビ２</li>
      <li>ナビ３</li>
      <li>ナビ４</li>
    </ul>
  </div>

試したこと

viewportも書いて、メディアクエリを書く順番も正しいと思うのですが、うまく表示できません。
プログラミング初心者ですがどうしても実現したいので、ご教示お願いします。

＊HTMLは文字数制限のため最初の部分だけ記載しています。

Answer 1

確認用のブラウザーにChromeやEdgeをお使いなのでは? それだと、ウィンドウの横幅自体を480px以下にできないので、ウィンドウの幅を縮めても検証できません。

簡単に確認するには、デベロッパーツールを表示させて、ページの内容との境界線をドラッグすれば、ウィンドウサイズを変えずにページの横幅を短くできます。実際、提示されたHTMLとCSSのページで、この方法で@media screen and (max-width: 480px)の部分が反映されることを確認済みです。

補足: line-heightプロパティの値にautoは指定できません。normalの間違いかな。