Project: Adoptly, Nav issue in mobile view

I have arranged the Navigation items properly. But in Mobile view as each item of the navigation should come one below the other, that isn’t happening.

I made the CSS code like this for the item in Navigation get displayed in list style,

@media (max-width: 500px) {
  ul li {
    display:list;
    width: 100%;
  }
  
}

The image is attached which shows the issue I am getting.

Hi
did you try to reduce the width of the preview window? It is possible that for the moment, the width is larger than 500px so that your rule is not activated. Your code is identical with mine. When I reduce the width of my preview window, I get the result of your image on the right

Could we see your full html + css code to determine the problem?