Media Query not working


The media query in the image isn’t working…why?
Link to my complete project: https://codepen.io/anon/pen/gdayJv

ul{
  display: flex;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  background-color: #21dc75;
  @media (max-width: 400px) {
    flex-direction: column;
  }  
}

This code is incorrect. You cannot put media queries in an element: try this:

ul{
  display: flex;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  background-color: #21dc75;
  
}

 @media (max-width: 400px) {
  ul{  flex-direction: column;}
  } 

You should enable Sass in your codepen settings to follow that structure of media query in your css

2 Likes