No matter which browser I use, the original menu won't disappear when I shrink the window.

Your css code looks good to me. I have a couple of things to investigate.

1. check your browser's console and see if there are any errors which could be breaking the rest of your rendered code.
2. check that you are using the media="screen" attribute in your index.html file when creating the css link:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

I've been looking for a solution to this as well. It appears the best answer I've found is you have to add screen into the media query

@media screen and (min-width: 320px) and (max-width: 568px) {
  #menu ul {
  display: none;
}
}


@media screen and (min-width: 568px) {
  #menu select 
   {
  display: none;
}
}

I've already checked all the html files and they have the link that is provided in most answers regarding css and having media be equal to screen. However, for some reason, that just doesn't do it even though that is supposed to be enough.

I think I figured out the answer. The code works as it is, but when you check the behavior you reduce the size of the window smaller than 320px. If you carefully reduce the size gradually, you will find the sweep spot where <ul> element disappears. The problem with this media query is that the the range of sweet spot between 320px and 568px is actually very narrow with a very high-resolution display like 4k display as I use.

Hey I got the same issues and I tried another solution. Somehow the second condition with the and operator in the first media query seems to be the problem so I deleted that.

So my logic now is: hide the menu until reaching 320px than hide the select menu and the button AND now show the original menu. This worked better for me.

@media (min-width: 320px) {
  #menu ul {
    display: none;
  }
}

@media (min-width: 568px) {
  #menu select,
  #menu button {
    display: none;
  }
  #menu ul {
    display: block;
  }
}

I banged on my keyboard a couple of times then eventually realized in my css I still had //Comments...etc..

Once I commented them properly with /** and **/ the issue went away.