How to hide Banner with media Query when it is 500 px and under

Question

code pic here

I am trying hide the Banner on the top of my page and something is wrong with my code.

This my rather wrong code and I would love to understand the logic on how to do this. I am new to media queries. The div class for the Banner is Banner with a paragraph for the text and the next div is class= workWithnames.

 @media screen and (max-width 501px){!important
h1 {  
 
  display: inline-block
   background: blue;

<header id="visible">visible<Header/>
<h1>Banner</h1>
  <p>"workWithNames"</p>
 
 @media screen and (max-width 500px){
 
 #hidden }
  display: inline-block