Hey Litmus Community!

I am having trouble with a small gap of 1px in my E-Mail Template. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html lang="en">
  <head>
      <meta charset="utf-8"> <!-- utf-8 works for most cases -->
      <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
      <title></title> <!-- the <title> tag shows on email notifications on Android 4.4. -->
      <style type="text/css">

          /* ensure that clients don't add any padding or spaces around the email design and allow us to style emails for the entire width of the preview pane */
          body,
          #bodyTable {
              height:100% !important;
              width:100% !important;
              margin:0;
              padding:0;
          }

          /* Ensures Webkit- and Windows-based clients don't automatically resize the email text. */
          body,
          table,
          td,
          p,
          a,
          li,
          blockquote {
              -ms-text-size-adjust:100%;
              -webkit-text-size-adjust:100%;
          }

          /* Forces Yahoo! to display emails at full width */
          .thread-item.expanded .thread-body .body, .msg-body {
              width: 100% !important;
              display: block !important;
          }

          /* Forces Hotmail to display emails at full width */
          .ReadMsgBody,
          .ExternalClass {
              width: 100%;
              background-color: #f4f4f4;
          }

          /* Forces Hotmail to display normal line spacing. */
          .ExternalClass,
          .ExternalClass p,
          .ExternalClass span,
          .ExternalClass font,
          .ExternalClass td,
          .ExternalClass div {
              line-height:100%;
          }

          /* Resolves webkit padding issue. */
          table {
              border-spacing:0;
          }

          /* Resolves the Outlook 2007, 2010, and Gmail td padding issue, and removes spacing around tables that Outlook adds. */
          table,
          td {
              border-collapse:collapse;
              mso-table-lspace:0pt;
              mso-table-rspace:0pt;
          }

          /* Corrects the way Internet Explorer renders resized images in emails. */
          img {
              -ms-interpolation-mode: bicubic;
          }

          /* Ensures images don't have borders or text-decorations applied to them by default. */
          img,
          a img {
              border:0;
              outline:none;
              text-decoration:none;
          }

          /* Styles Yahoo's auto-sensing link color and border */
          .yshortcuts a {
              border-bottom: none !important;
              text-decoration: none !important;
          }

          /* Styles the tel URL scheme */
          a {
              color: #83CFF0;
          }
          a[href^=tel],
          .mobile_link,
          .mobile_link a {
              color:#222222 !important;
              text-decoration: underline !Important;
          }
          /*Android 4.4 code*/
          body { margin:0 !important; }
          div[style*="margin: 16px 0"] { margin:0 !important; }
  table th {font-weight:normal !important; }
          /* Media queries for when the viewport is smaller than the default email width but not too narrow. */
          @media screen and (max-device-width: 600px), screen and (max-width: 600px) {

              /* Constrains email width for small screens */
              table[class="email-container"] {
                  width: 100% !important;
              }
              /* Constrains tables for small screens */
              table[class="fluid"] {
                  width: 100% !important;
              }

              /* Forces images to resize to full width of their container */
              img[class="fluid"],
              img[class="force-col-center"] {
                  width: 100% !important;
                  max-width: 100% !important;
                  height: auto !important;
              }
              /* And centers these ones */
              img[class="force-col-center"] {
                  margin: auto !important;
              }

              /* Forces table cells into rows */
              td[class="force-col"],
              td[class="force-col-center"] {
                  display: block !important;
                  width: 100% !important;
                  clear: both;
              }
              /* And centers these ones */
              td[class="force-col-center"] {
                  text-align: center !important;
              }

              /* Forces table cells into rows */
              /* Floats a previously stacked image to the left */
              img[class="col-3-img-l"] {
                  float: left;
                  margin: 0 15px 15px 0;
              }
              /* Floats a previously stacked image to the right */
              img[class="col-3-img-r"] {
                  float: right;
                  margin: 0 0 15px 15px;
              }

              /* Makes buttons full width */
              table[class="button"] {
                  width: 100% !important;
              }

          }

          /* Media queries for when the viewport is narrow. */
          /* Rules prefixed with 'hh-' (for 'handheld') repeat much of what's above, but these don't trigger until the smaller screen width. */
          @media screen and (max-device-width: 425px), screen and (max-width: 425px) {

              /* Helper only visible on handhelds. All styles are inline along with a `display:none`, which this class overrides */
              div[class="hh-visible"] {
                  display: block !important;
              }

              /* Center stuff */
              div[class="hh-center"] {
                  text-align: center;
                  width: 100% !important;
              }

              div[class="footer-div"] {
                  text-align: center !important;
                  margin: auto !important;
                  width: 100% !important;
              }

              /* Constrain tables for small screens */
              table[class="hh-fluid"] {
                  width: 100% !important;
              }

              /* Force images to resize to full width of their container */
              img[class="hh-fluid"],
              img[class="hh-force-col-center"] {
                  width: 100% !important;
                  max-width: 100% !important;
                  height: auto !important;
              }
              /* And center these ones */
              img[class="hh-force-col-center"] {
                  margin: auto !important;
              }

              /* Force table cells into rows */
              td[class="hh-force-col"],
              td[class="hh-force-col-center"] {
                  display: block !important;
                  width: 100% !important;
                  clear: both;
              }
              /* And center these ones */
              td[class="hh-force-col-center"] {
                  text-align: center !important;
              }

                          th[class="hh-force-col"],
              th[class="hh-force-col-center"] {
                  display: block !important;
                  width: 100% !important;
                  clear: both;
              }
              /* And center these ones */
              th[class="hh-force-col-center"] {
                  text-align: center !important;
              }



              /* Stack the previously floated images */
              img[class="col-3-img-l"],
              img[class="col-3-img-r"] {
                  float: none !important;
                  margin: 15px auto !important;
                  text-align: center !important;
              }
              div[class="button-container"] {
                  text-align: center !important;
              }

              .remove-on-mobile{
                  display: none !important;
              }

          }

      </style>
  </head>
  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f4f4f4" style="margin:0; padding:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
      <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f4f4f4" id="bodyTable" style="border-collapse: collapse;table-layout: fixed;margin:0 auto;"><tr><td>

          <!-- CSS Image background in Outlook : BEGIN -->
          <!-- Best used with absolute image paths -->
          <!--[if gte mso 9]>
          <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
              <v:fill type="tile" color="#f4f4f4" src="assets/nice_snow.png">
          </v:background>
          <![endif]-->
          <!-- CSS Image background in Outlook : END -->


          <!-- Logo Left Nav Right + Vertical Padding : BEGIN -->
          <table border="0" width="600" cellpadding="0" cellspacing="0" align="center" class="email-container" style="margin: auto;">
              <tr>
              </tr>

          </table>
          <!-- Logo Left Nav Right + Vertical Padding : END -->

          <!-- Email Container : BEGIN -->
          <!-- This table wraps the whole body email within it's width (600px), sets the background color (white) and border (thin, gray, solid) -->
          <table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#f4f4f4" style="margin: auto;" class="email-container">



              <!-- Header number 1-->
              <tr>
                  <td>
              <tr style="background: #B9E9F9;">
                  <td style="padding-top:30px;">
                      <div style="text-align: center; font-family:Helvetica, arial, sans-serif; font-size: 24px; font-weight: lighter; color: #ffffff; text-align:center;line-height: 30px">Header Block with full-width pic</div><br>
                      <img alt="" border="0" class="fluid" height="350" src="http://placehold.it/600x350" style="display: block;" width="600" /></td>
              </tr>
              </td>
              </tr>
              <!-- End Header Number 1 -->





              <!-- Header Number 2-->
                          <tr style="background: #6dbee1 ; color: white;" border="0">
                              <td style="padding: 0 30px;">
                                  <img alt="" border="0" class="hh-force-col-center"  src="http://placehold.it/200x350" style="display: block;margin: auto;" width="200" height="350" />
                                  <table align="center" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" cellpadding="0" cellspacing="0" class="fluid" width="100%">
                                      <tbody>

                                          <tr>
                                              <th class="hh-force-col-center" style="padding-right: 30px; vertical-align:top; font-weight:normal;" valign="top">
                                                  <img alt="" border="0" class="hh-force-col-center"  src="http://placehold.it/200x350" style="display: block;margin: auto;" width="200" height="350" />
                                              </th>
                                              <th class="hh-force-col" style="padding-left: 0;font-weight:normal;" valign="top" width="100%">
                                                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                      <tbody>
                                                          <tr>
                                                              <td style="width:100%; font-family: sans-serif; font-size: 22px; line-height: 28px; color: white; text-align: left;">
  <br>
                                                                  <div class="hh-center" style="font-size: 28px;line-height: 1; color: white;">LOREM IPSUM DOLOR SIT AMET</div>
                                                                  <br />
                                                                  Header block with vertical pic and button; on mobile devices pic above text
                                                                  <table border="0" cellpadding="0" cellspacing="0" class="mobile-button-container" width="100%">
                                                                      <tbody>
                                                                          <tr>
                                                                              <td class="padding-copy" style="width:100%; padding: 25px 0 0 0;">
                                                                                  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="responsive-table">
                                                                                      <tbody>
                                                                                          <tr>
                                                                                              <td width="100%" >
                                                                                                 <div class="button-container" style="text-align: left;">
                                                                                                  <a class="mobile-button" href="http://miamed.de" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #70aac3; text-decoration: underline; background-color: #F1F9FC; border-top: 15px solid #F1F9FC; border-bottom: 15px solid #F1F9FC; border-left: 25px solid #F1F9FC; border-right: 25px solid #F1F9FC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Jetzt loslegen!</a>
                                                                                                  </div>
                                                                                              </td>
                                                                                          </tr>
                                                                                      </tbody>
                                                                                  </table>
                                                                              </td>
                                                                          </tr>
                                                                      </tbody>
                                                                  </table>

                                                                  <br>
                                                              </td>
                                                          </tr>
                                                      </tbody>
                                                  </table>
                                              </th>
                                          </tr>
                                      </tbody>
                                  </table>
                              </td>
                          </tr>
                          <!-- End Header Number 2-->


                          <!-- Header number 3-->
              <tr>
                  <td>
                      <img src="http://placehold.it/600x350/888888/7777777" alt="alt text" height="350" width="600" border="0" style="display: block;" class="fluid">
                  </td>
              </tr>

          </table>
          <!-- Email Container : END -->





      </td></tr></table>
  </body>
  </html>

In the "header 2" yahoo Mail and Gmail mobile add a small gap so the pictures do not have contact to the margin. I personally think it's due to the table in the table. I added any kind of inline css available to my knowledge... Here's the screenshot by the way: https://litmus.com/checklist/tests/4559729#ffyahoo

Thanks!