Trying to center a table within a table using CSS

Question

I'm working on this project and I have this layout that works well at just about all screen resolutions, and I'm trying to put the finishing touches on screen resolutions smaller than 745px. But I have 2 tables within another table cell that will not align the way they should. I'm using margin: 0px auto; in the CSS, but they won't do what I'm telling them to do, even though everything I know about CSS says it should work.

At higher screen resolutions these 2 tables are told to float to the left and right of their parent cell, which they do just fine. But when I change up the CSS code at screen resolutions smaller than 745px, I tell them to display: block; margin: 0px auto; which should center them within their cell, but it doesn't. Am I doing something wrong?

/*Normal Resolutions */

Upper-block, lower-block {
  position: relative;
  margin: 20px auto;
  width: 800px;
  }

left-data {
  display: inline-block;
  width: 50%;
  max-width: 360px;
  float: left;
}

right-data {
  display: inline-block;
  width: 49%;
  max-width: 360px;
  float: right;
}


/*Smaller Resolution */

@media screen and (max-width: 745px) {
    left-data, right-data {
      display: block;
      clear: both;
      margin: 0px auto;
      position: relative;
    }
 }

<div>

<table>
  
  <tr>
    <td>
      <table id="upper-block">
        <tr>
          <td>Table 1 Content</td>
          <IMAGE HERE>
           </td>
           </tr>
      </table>
      </td>
     </tr>
  
  <tr>
    <td>
      <table id="lower-block">
        <tr>
          <td>
            <table id="left-data"> </table>
            <table id="right-data"> </table>
          </td>
        </tr>
      </table>
      </td>
    </tr>
  
</table>
  
</div>            

Answer 1

Since the float is still active ( or should be ) try adding a float:none, or float:none !important; to override the mash of different "alignments"