title: @media screen and (min-width: 320px) being overwritten
body: <p>I am tring to work with a small from, just 3 elements.
  This is the i'm using, can someone please let me know where i am going wrong?
  I have tried working with both min-width and max-width, nothing seems to be working.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  
  html,body{margin:0px; padding:0px; font-family:arial;}
  
  form.form { margin:0px;}
  
  p span strong{ color:#505050;}
  
  form.form span.error {clear: left;display: block;font-weight: normal;margin-top: 2px;padding-left: 166px;}
  
  /*form.form span.error {clear: left;display: block;font-weight: normal;margin-top: 2px;padding-left: 172px;}*/
  
  form.form p.required, form.form span.required, form.form label.required
  {font-weight: normal;}
  
  form.form p {clear: left;margin: 0px;padding: 0px;width:544px;}
  
  
  .btn_subscribe {
  float: left;
  margin: 0 0 11px 0;
  width: 174px;
  height: 41px;
  background: url("http://www.vuesoftware.com/assets/btn_subscribenow.png") no-repeat;
  background-size:170px 40px;
  border: none;
  cursor: pointer;
  }
  
  form.form div.submit{padding-top:7px;}
  .text{ border: none; background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left; width: 184px; height:32px; font-size:12px;
      padding-left:11px;}
  
  form.form div.no-label{font-size:11px; margin-left:0px !important;color: rgb(226, 140, 36); }
  
  form.form div label {display: block; float: left; margin: 0; padding: 0 13px 0 0; text-align: right; width: 160px; font-size:13px;}
  
  .required{ padding:10px 0px 0px !important;  }
  div span span {display: block; padding-left:174px; }
  div span span label{ float:none !important;}
  
  @media screen and (max-width: 320px)
  {
      form.form div.no-label{
          float:none;
          width:200px;
          }
      .text{
          border:none;
          background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left;
          width:184px;
          height:32px;
          }
      .btn_subscribe{
          background:url("http://www.vuesoftware.com/assets/btn_subscribenow@2x.png") no-repeat;
          background-size:170px 40px;
          }
        p span strong{
            display:none;
          }
  }
  
  @media screen and (min-width: 320px)
  {
      form.form div.no-label{
          float:left;
          width:350px;
          }
      .text{
          border:none;
          background:url("http://www.vuesoftware.com/assets/input_subscribe_big.png") no-repeat top left;
          width:300px;
          height:32px;
          font-size:12px;
          padding-left:11px;
          }
      .btn_subscribe {
          width:250px;
          height:40px;
          background: url("http://www.vuesoftware.com/assets/btn_subscribefornewsletter@2x.png") no-repeat;
          background-size:250px 40px;
          border:none;
          cursor:pointer;
          }
  }
  
  @media screen and (min-width: 960px)
  {
      form.form div.no-label{
          float:none;
          width:200px;
          }
      .text{
          border:none;
          background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left;
          width:184px;
          height:32px;
          }
      .btn_subscribe{
          background:url("http://www.vuesoftware.com/assets/btn_subscribenow@2x.png") no-repeat;
          background-size:170px 40px;
          }
      p span strong{
          display:block;
          }
  }
  </code></pre>