media queries not working properly in a react app

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?