Media query does not apply

link of the project: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-challenge-project-responsive-club-website/projects/responsive-club-website

I have written HTML code for desktop first but now I added media queries for screens max-width:600px. When I try to launch on Chrome and use Chrome dev tools ( Tried for iPhone X, 6/7/8, also added my own device) my media queries do not work, it still shows old code. I also added the viewport meta tag as:

Unfortunately on browser changes, I made inside media queries do not apply! What am I doing wrong?

MY CSS CODE:

html, body{
margin: 0;
font-family:‘Merriweather’, serif;

}
@media only screen and (max-width: 600px) {

html, body{
margin: 0;
font-family:‘Merriweather’, serif;

}
.navbar{
display:flex;
background-color: #fcba03;
height:4rem;
min-width: 100%;

}
.navbar nav{
display:inline-flex;
justify-content: space-evenly;
align-content:center;

}
.logo{
align-self:center;
height: 44%;
justify-content: flex-start;
width: 3%;
}
.navbar nav a{
color:red;
z-index: 1;
font-size: 0.2rem;
}
.navbar nav a:hover{
background-color:blue;
}

}
@media only screen and (min-width: 601px) {

.navbar{
display:flex;
background-color: #160013;
height:4rem;

}
.navbar nav{
display:inline-flex;
justify-content: space-evenly;
align-content:center;

}
.logo{
align-self:center;
height: 44%;
margin-left: 1rem;
margin-right:8rem;
justify-content: flex-start;
width: 3%;
}
.navbar nav a{
color:white;
z-index: 1;
font-size: 2rem;
position:relative;
padding: 1rem 4.5rem 1rem 10rem;
width:60%;
}
.navbar nav a:hover{
background-color:#400501;
}

.imagew{
display:grid;
grid-template:repeat(30,1fr), repeat(12,1fr);
height:550px;
width:100%;
border: 1px solid #4a0919;
}
.imageww{
height: 100%;
background-image: url(“bookclub.jpeg”);
background-size:cover;
opacity: 0.45;
grid-area: 1 / 1 /30 /12;
}

.welcome{
grid-area: 10 / 2 / 10 / 10;
z-index:1;
font-size:1.5rem;

}
.whyy{
text-align: center;
border: 1px solid #4a0919;
height:350px;

}
.images{
display:flex;
justify-content: space-around;
}
.i1{
height:12rem;
width:16rem;
}
.books{
text-align:center;
}
.csbooks{
display:grid;
width:100%;
grid-template: repeat(12,1fr),repeat(3,1fr);

}
.csbooks div img{
height:12rem;
width:16rem;

}
#g1{
grid-area: 1/ 1 / 12 / span 1;
border-right: 1px solid #4a0919;

}
#g2{

grid-area: 1/ 2 / 12 / span 1;
border-right: 1px solid #4a0919;

}
#g3{
grid-area: 1/ 3 / 12 / span 1;
border-right: 1px solid #4a0919;
}
}