メディアクエリーについて

少し前にも質問させていただいなのですが、mediaqueryが反応しません。。。
実機でも確認したところ上の画像のような配置になってしまします。

![]
toggle device toolbarの表示

width500px以下のウィンドウサイズにしたときの表示※こちらの画像のような配置にしたいです。

html
1<!-- header -->
2            <div id="header">
3
4                <div id="sisi-box">
5                    <img src="img/sisi.png" alt="唐獅子" id="sisi">
6                </div>
7
8                <div id="swirl-box">
9                    <img src="img/ swirl.png" alt="" id="swirl1">
10                    <img src="img/ swirl.png" alt="" id="swirl2">
11                    <img src="img/ swirl.png" alt="" id="swirl3">
12                    <img src="img/ swirl.png" alt="" id="swirl4">
13                    <img src="img/ swirl.png" alt="" id="swirl5">
14                    <img src="img/ swirl.png" alt="" id="swirl6">
15                </div>
16
17                <ul id="nav-box">
18                    <a href="#window" id="work"><li>WORK</li></a>
19                    <a href="#window" id="profile"><li>PROFILE</li></a>
20                    <a href="#window" id="contact"><li>CONTACT</li></a>
21                </ul>
22
23                <div id="lant-box">
24                    <a href=""><img src="img/lantern.png" alt="" id="lant"></a>
25                </div>
26
27            </div>

css
1
2/*---------- head ----------*/
3#header{
4    width: 100vw;
5    height: 100vh;
6    display: flex;
7    justify-content: center;
8    align-items: center;
9    background-color: rgb(214 150 43);
10}
11/* sisi */
12#sisi-box{
13    width: 70vw;
14    display: flex;
15    justify-content: center;
16    align-items: center;
17    z-index: 250;
18}
19#sisi{
20    height: 90vh;
21}
22#nav-box{
23    width: 10px;
24    margin-left: -5px;
25    position: absolute;
26    bottom: 2%;
27    right: 20%;
28    z-index: 750;
29}
30#nav-box,li{
31    font-size: 40px;
32    font-family: 'Permanent Marker', cursive;
33    float: left;
34    list-style: none;
35    color: black;
36    margin: 15px;
37}
38/* swirl */
39#swirl-box{
40    height: 100vh;
41    width: 100vw;
42    position: absolute;
43    opacity: .5;
44}
45#swirl1{
46    height: 20%;
47    position: absolute;
48    top: 15%;
49    left: 15%;
50}
51#swirl2{
52    height: 20%;
53    position: absolute;
54    top: 35%;
55    left: 5%;
56}
57#swirl3{
58    height: 20%;
59    position: absolute;
60    top: 45%;
61    left: 20%;
62}
63#swirl4{
64    height: 20%;
65    position: absolute;
66    top: 15%;
67    right: 15%;
68}
69#swirl5{
70    height: 20%;
71    position: absolute;
72    top: 35%;
73    right: 5%;
74}
75#swirl6{
76    height: 20%;
77    position: absolute;
78    top: 45%;
79    right: 20%;
80}
81
82/* spin animation */
83#swirl1,#swirl2,#swirl3{
84    animation: spin 3s linear infinite;
85}
86#swirl4,#swirl5,#swirl6{
87    animation: spin1 3s linear infinite;
88}
89@keyframes spin {
90	0% {transform: rotate(0deg);}
91	100% {transform: rotate(360deg);}
92}
93@keyframes spin1 {
94	0% {transform: rotate(0deg);}
95	100% {transform: rotate(-360deg);}
96}
97/* lantern */
98#lant-box{
99    height: 30%;
100    position: absolute;
101    bottom: 5%;
102    left: 5%;
103    z-index: 500;
104}
105#lant{
106    height: 100%;
107}
108/* Less than window width 960px CSS */
109@media screen and ( max-width:960px ){
110#nav-box{
111    width: 10px;
112    margin-left: -5px;
113    right: 28%;
114    bottom: 2%;
115}
116#nav-box,li{
117    font-size:30px;
118    margin: 5px;
119}
120}
121/* Less than window width 500px CSS */
122@media screen and ( max-width:500px ){
123
124/* sisi */
125#sisi-box{
126    width: 70vw;
127    margin-right: 120%;
128}
129#sisi{
130    height: 70vh;
131}
132#nav-box{
133    width: 10px;
134    top: 30%;
135    right: 45%;
136    font-size: 10px;
137}
138#nav-box,li{
139    font-size: 30px;
140    margin: 10px;
141}
142/* lantern */
143#lant-box{
144    height: 20%;
145    position: absolute;
146    bottom: 5%;
147    left: 60%;
148}
149#lant{
150    height: 125%;
151    transform: scale(-1, 1);
152}
153/* swirl */
154#swirl-box{
155    height: 80vh;
156    width: 300vw;
157    margin-right: 150%;
158}
159.content:hover .left{
160    transform: translateX(-100%);
161}
162.content:hover .right{
163    transform: translateX(100%);
164}
165}
166