title: CSS display:none not working with media query
body: <p>I have a site that I'm trying to make responsive. So I need to hide an anchor when under 850px. The code looks roughly like this:</p>
  <p>What I want is, to show the FIRST anchor (<code>#tryitnow</code>) by default, and show the other one (<code>#tryitnow1</code>) when the screen is under 850px.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#container div#layout div#slot1 a#tryitnow {
    display: inline;
    position: absolute;
    top: 90px;
    right: 75px;
  }
  div#container div#layout div#slot1 a#tryitnow1 {
    display: none;
  }
  
  @media all and (max-width: 850px) {
      div#container div#layout div#slot1 a#tryitnow1 {
        display: inline;
        position: relative;
        margin-right:auto;    
        margin-left:5;    
      }
        div#container div#layout div#slot1 a#tryitnow {
        display: none
      }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;a href="javascript:void(0);" class="sign-up-button" id="tryitnow"&gt;&lt;img src="assets/images/tryitnow.png" alt="Try it Now!"&gt;&lt;/a&gt;
      &lt;div id="are-you-a-visionary"&gt;
         Bla bla some paragraphs
      &lt;/div&gt;
      &lt;a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"&gt;&lt;img src="assets/images/tryitnow.png" alt="Try it Now!"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, only of the anchor <code>#tryitnow1</code> is visible all the time, no matter the screen size. <code>#tryitnow</code> ALWAYS gets hidden.</p>
  <p>Why? Could you please help? Thank you!</p>