title: How do I avoid using !important?
body: <p>I am trying to make my website responsive. However, when I use another media query, a lot of things won't work. For example:</p>
  
  <p>(Normal CSS)</p>
  
  <pre class="lang-css prettyprint-override"><code>div#divName
  {
      font-size:1em;
  }
  </code></pre>
  
  <p>(Media query code)</p>
  
  <pre class="lang-css prettyprint-override"><code>@media screen and (max-width: 320px) 
  {
      div#divName
      {
          font-size:.5em;
      }
  }
  </code></pre>
  
  <p>This doesn't work. It only works when I use "!important" behind it. But I don't know if that is correct or "wrong". Could anyone tell me how I can fix this?</p>