Media queries not working?

Am I doing something wrong? Basicly when someone is on a mobile version I want the top two gre tables to be full width heres a JSFidle

CSS

@media screen and (max-width:480px){
      table[class="mobile_version"] {
      width:100%; !important;
      };
    };
    @media screen and (max-width: 480px){
    td[class="mobile-hide"]{
      display: none !important;
    };
   };
    @media screen and (max-width: 480px){
    td[class="mobile-show"]{
      display: inline !important;
      text-align: right;
    };
   };

HTML

<tr>
        <td>
          <table class="mobile_version" style="float:left;display: inline-block;background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; padding: 10px 10px 40px 10px; text-align: left; width: 45%;Margin-right:3%;line-height: 168%;Margin-top:10px">
            <tr>
              <td>
                <div>
                  <span>
                  <div><span style="font-weight:bold">Order #:</span><span>&nbsp;&nbsp;35644:</span></div> 
                  <div><span style="font-weight:bold">Ordered by:</span><span>&nbsp;&nbsp;Dan Utterwood</span></div> 
                  <div><span style="font-weight:bold">Paid by:</span><span>&nbsp;&nbsp;Debit Card</span></div>
                  <div><span style="font-weight:bold">Expected Delivery:</span></div>
                  <div><span>14th December</span></div>
                  <div><span style= "font-weight:bold">Postage Method:</span></div>
                  <div><span>Airmail</span></div>
                </div>
              </td>
            </tr>
          <table class= "mobile_version"style="float:left;display: inline-block; background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; text-align: left;padding: 10px 10px 40px 10px; width: 45%;min-height:170px;Margin-top:10px">
            <tr>
              <td>
                <div>
                  <div><span style= "font-weight:bold; line-height:170%">Ordered to:</span></div>
                  <div><span>Ross Kemp</span></div> 
                  <div><span>Space</span></div>
                  <div><span>Spacey Space</span></div> 
                  <div><span>Spacey space, space</span></div>
                  <div><span>SP4C5E</span></div>
                  <div><span>Spaaace</span></div>
                  <div><span style= "font-weight:bold; line-height:135%">Delivery Instructions:</span></div>
                  <div><span>Leave with neighbors cat<span></div>
                </div>
              </tr>
            </td>
          </table>
        </td>
      </tr>

I have already made it responsive as you can see with the inline: block however it just wont read the media queries

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

UPDATED

Ok so this is great I have the media queries in however since i've put them in i've had a few problems

1. The first set of blocks dont align on one line anymore and I cannot put a margin on the right hand side

2. Secondly I cannot seem to have two td.blahblah{afafsasdff}and they cancel eachother out

JSFIDDLE