media queries not working properly in a react app - reactjs

Question

i am a complete begginer trying to make a responsive react app. My problem is that media queries don't work, and i can't figure out why.
$main-color: #b282ff;
$darker-main-color: #8A42FF;
$shadow-color: #d9c2ff;
$accent-color: #E8FFC2;
$main-font: "Libre Bakersville";
$secondary-font: "Bebas Neue";
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 2em;
font-family: "Bebas Neue";
}
.navbar-container {
display: flex;
flex-direction: row;
align-items: center;
height: 10vw;
width: auto;
background: $main-color;
padding: 16px;
ul {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
font-size: 2rem;
position: relative;
height: 100%;
li {
padding: 0 60px 0 60px;
list-style: none;
}
}
a{
color: white;
text-decoration: none;
&:visited {
color: white;
}
}
}
.navbar-menu-toggle{
display: none;
position: absolute;
padding: 10px;
color: #fff;
}
.navbar-logo {
font-size: 3rem;
a{
color: white;
text-decoration: none;
&:visited {
color: white;
}
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
#media screen and (max-width:500px) {
.navbar-container{
flex-direction: column;
height: auto;
}
}
here is my scss. what i am trying to do is to make the list in the menu to display as a column istead of a row. While tdebugging i tried to switch the media queruies statements, just so it changes the background color, but it also did not work. What can i do?