quando o site fica menor de 600px, deveria ativar o @media, porém não entra
* {
font-family:Arial;
}
body {
margin:0;
padding:0;
}
header {
display: flex;
justify-content: center;
}
.container {
width: 800px;
height: 100px;
background-color: #727272;
}
.topo {
text-align: center;
font-size: 20px;
}
article {
display: flex;
justify-content: center;
}
.musicas {
padding-top: 10px;
width: 800px;
background-color: #b9b9b9;
}
.track {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.namefile {
text-transform: uppercase;
margin-left: 10px;
font-weight: bold;
}
.control {
width: 300px;
padding-bottom: 10px;
}
@media (max-width: 600px) {
body {
background-color: tomato;
}
header .container {
width: auto;
}
article .musicas {
background-color: teal;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
no Head do HTML?