Bourbon Neat Project: media query not working

Design Front End Development
1

Hi, For my Bourbon Neat project, I want to implement a media query, so that the banner hides when in Smartphone mode:

article.banner {
  margin-top: 30px;
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px)     {
    display: none;
  }
}

But for some reason this is not working.

Can someone tell me what’s going on?

My code is at:

Thanks for your help,

Anthony