I am currently troubleshooting why there is a large white gap between the preheader and logo banner of my responsive email for recipients who use AOL (Chrome) and Comcast/Xfinity mail clients. Everything below the preheader is pushed way down the page and I am not sure why.

Here is my current code:

        <table class="body">
          <tr>
            <td class="center" align="center" valign="top">


<table class="body" style="margin:20px auto;">
      <!-- Start of preheader -->
    <table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="preheader">
    <tbody>
        <tr>
            <td>
                <table width="570" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                <tbody>
                    <tr>
                        <td width="100%">
                            <table width="570" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                            <tbody>

                                 <tr>
                                 <td>
                                    <table width="570" align="left" border="0" cellpadding="0" cellspacing="0">
                                       <tbody>
                                          <tr>
                                             <td class="preheader-link" align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 12px;" mc:edit="top_nav">
                                                <a href="#" style="text-decoration: none;">View in browser </a> 
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                    <table width="150" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                       <tbody>
                                          <tr>
                                             <td width="30" height="30" align="right">
                                                <div class="socialdesktop">
                                                   <a target="_blank" href="https://twitter.com/shopbrika">
                                                   <img src="http://blog.brika.com/wp-content/uploads/2016/03/twitter.jpg" alt="" border="0" width="30" style="display:block; border:none; outline:none; text-decoration:none;">
                                                   </a>
                                                </div>
                                             </td>
                                             <td align="left" width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                             <td width="30" height="30" align="center">
                                                <div class="socialdesktop">
                                                   <a target="_blank" href="https://www.facebook.com/ShopBrika">
                                                   <img src="http://blog.brika.com/wp-content/uploads/2016/03/facebook.jpg" alt="" border="0" width="30" style="display:block; border:none; outline:none; text-decoration:none;">
                                                   </a>
                                                </div>
                                             </td>
                                             <td align="left" width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                             <td width="30" height="30" align="center">
                                                <div class="socialdesktop">
                                                   <a target="_blank" href="https://www.pinterest.com/SHOPBRIKA">
                                                   <img src="http://blog.brika.com/wp-content/uploads/2016/03/pinterest.jpg" alt="" border="0" width="30" style="display:block; border:none; outline:none; text-decoration:none;">
                                                   </a>
                                                </div>
                                             </td>
                                              <td align="left" width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                             <td width="30" height="30" align="center">
                                                <div class="socialdesktop">
                                                   <a target="_blank" href="http://instagram.com/shopbrika/">
                                                   <img src="http://blog.brika.com/wp-content/uploads/2016/03/instagram.jpg" alt="" border="0" width="30" style="display:block; border:none; outline:none; text-decoration:none;">
                                                   </a>
                                                </div>
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </td>
                              </tr>

                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
    <!-- End of preheader -->       
    <tbody><tr>
      <td class="center" align="center" valign="top">

          <table class="container">
          <tbody>
          <tr>
          <td>
  <p><img src="/headerimg.jpg" mc:label="header-image" mc:edit="headerimage" alt="Header" title="Header"></p>
</td></tr> 

Any help with this would be greatly appreciated!