html - left align under 600 px

Question

I am not quite sure why my logo on my Test site is left aligning when I go under 600px in screen width? I do not have any float left and I centered the picture with text-align: center also.

I am building an email newsletter template. Therefore I use the foundation css framework, and that means tables.

Can anybody see why my logo is left align below 600px?

HTML

<!-- Logo -->
          <table class="row background-color__white">
            <tr>
              <td class="center" align="center">
                <center>
                  <table class="container">
                    <tr>
                      <td class="wrapper last">
                        <table class="twelve columns">
                          <tr>
                            <td style="text-align: center;">
                              <a href="http://google.dk">
                                <img width="250" height="80" src="https://s24.postimg.org/y6ho747xx/Untitled_1.png" alt="Alt text here">
                              </a>
                            </td> 
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </center>
              </td>
            </tr>
          </table>

Answer 1

Your table, tr, and td tags have display: table-row, they need to be turned into display: block. If you need them only for media queries, then stick this in there.

#test, #test table, #test td, #test tr, #test tbody {
  display: block;
}

Updated with a jsfiddle:

https://jsfiddle.net/cj09ecy2/