I have an email that used to render perfectly in iOS 8 and above but for some reason it doesn't anymore. The 20px gutters on the sides don't seem to be working and the email looks like it's stretching full width where it shouldn't

I have tried all the meta tag fixes but it does not seem to make a difference. I would really appreciate some help!

Thanks!

Here is the code:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" name="viewport" content="charset=UTF-8; width=device-width; initial-scale=1.0; text/html" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no"/>
    <title>Nature Outlook</title>
    <style type="text/css">
      body {width:100% !important;}
      .ReadMsgBody { width: 100%;}
      .ExternalClass {width: 100%;}
      body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
      table td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
      p { margin: 0; padding: 0; margin-bottom: 0; }
      ul { margin: 0; }
      a, img {border:none;}
      .appleLinks a {color:#a0a0a0; text-decoration:none;} /* Stop iOS making times and dates blue */
      .ExternalClass * { line-height: 100%; }
      .links, a {color:#f39756; text-decoration:underline;}
      .links-white {color:#ffffff; text-decoration:none;}
      .links-grey {color:#666666; text-decoration:underline}
      .img-link {font-family: Arial, sans-serif; font-size:12px;color:#000000;-ms-interpolation-mode: bicubic; display:block}
      .h1 {
      font-family: Georgia, Times, Times New Roman, serif; font-size:16px; line-height:22px; color:#424242;
      }
      .white-cta {
      font-family: Georgia, Times, Times New Roman, serif; font-size:16px; line-height:22px; color:#ffffff; text-align:center; padding:8px;
      }
      .p {
      font-family: Georgia, Times, Times New Roman, serif; font-size:14px; line-height:20px; color:#424242;
      }
      .p10px {
      font-family: Georgia, Times, Times New Roman, serif; font-size:10px; line-height: 14px; color: #7d7d7d;
      }
      .smallprint {
      font-family: Arial, Helvetica, sans-serif; font-size:9px;color:#666666; line-height: 12px;
      }
      @media (max-width:600px) {
      .fit-width {
      /* content flows down in mobile view and stretches to fill the screen */
      width: 100%;
      height: auto;
      }
      .float-left {
      /* content flows down in mobile view aligns to the left*/
      width: 100%;
      height: auto;
      float: left;
      }
      .imageSpacer {
      width: 100%;
      height: auto;
      float: left;
      padding-bottom: 15px;
      }
      .hide {
      /* hides content in mobile view */
      display:none;
      }
      .display-block {
      /* to ensure spacing around content isn't reduced in mobile view */
      display:block;
      }
      .fit-width-block {
      /* content drops down in mobile view in a block format */
      width: 100%;
      height: auto;
      display: block;
      }
      .mobile-height {
      height: 20px;
      }
      .mobile-center {
      text-align:center !important;
      }
      .mobile-headline {
      /* reduces the size of large fonts in mobile view */
      font-size: 32px !important;
      line-height: 36px !important;
      }
      .mobile-content {
      /*hidden button*/
      display: block !important;
      max-height: none !important;
      float: left !important;
      width: 100% !important;
      height: auto !important;
      overflow:visible !important;
      visibility:visible !important;
      }
      .smallprint {
      /* increases the size of small fonts in mobile view */
      font-size: 12px !important;
      line-height: 16px !important;
      }
      }
      @media (max-width: 414px) {
      .mobile-headline {
      /* reduces the size of large fonts in mobile view */
      font-size: 29px !important;
      line-height: 38px !important;
      }
      .mobile-title {
      /* reduces the size of large fonts in mobile view */
      font-size: 22px !important;
      line-height: 26px !important;
      }
      .image-fit {
      /* content flows down in mobile view aligns to the left*/
      width: 100%;
      height: auto;
      padding-top: 15px;
      }
      }
    </style>
  </head>
  <body bgcolor="#d4d4d4">
    <!-- page container -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#d4d4d4">
      <tr>
        <td width="600" align="center" class="float-left">
          <!-- Read online -->
          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="fit-width">
            <tbody>
              <tr>
                <td width="20">&nbsp;</td>
                <td width="560" class="float-left">
                  <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="float-left">
                    <tr>
                      <td style="font-size:1px; height:15px" height="15">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="center" valign="top" style="text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:18px; color:#000000; padding-bottom:10px">
                        Trouble viewing this email?  <a href="#SPCLICKTOVIEW" xt="SPCLICKTOVIEW" target="_blank" style="color: #000000">Click here</a> to view online
                      </td>
                    </tr>
                  </table>
                </td>
                <td width="20">&nbsp;</td>
              </tr>
            </tbody>
          </table>
          <!-- // Read online -->
          <!-- tab -->
          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="fit-width" bgcolor="#FFFFFF">
            <tr>
              <td align="right" valign="top">             
                <img src="http://fastart.nature.com/A39731/tab.png" alt="Nature Research" width="125" height="24" class="img-link" border="0" />
              </td>
            </tr>
          </table>
          <!-- // tab -->
          <!-- header logo  -->
          <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="fit-width">
            <tr>
              <td width="20">&nbsp;</td>
              <td width="560" align="left" valign="top" class="float-left">
                <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="float-left">
                  <tr>
                    <td align="left" valign="top"><a href="http://www.nature.com/news/outlooks-1.16103" target="_blank"><img src="http://fastart.nature.com/A39731/header_logo.png" alt="Nature Outlook" width="315" height="37" border="0" class="img-link image-fit" /></a></td>
                  </tr>
                  <tr>
                    <td height="12" style="font-size:1px; height:12px">&nbsp;</td>
                  </tr>
                </table>
              </td>
              <td width="20">&nbsp;</td>
            </tr>
          </table>
          <!-- // header logo  -->
          <!-- banner -->
          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="fit-width" bgcolor="#ffffff">
            <tr>
              <td align="center" valign="top"><a href="" target="_blank"><img src="http://fastart.nature.com/A39731/header_image.png" width="600" height="83" alt="Nature Outlook" border="0" class="img-link fit-width" /></a></td>
            </tr>
            <tr>
              <td height="25">&nbsp;</td>
            </tr>
          </table>
          <!-- // banner -->
          <!-- content box  -->
          <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="fit-width">
            <tr>
              <td width="20">&nbsp;</td>
              <td width="560" align="left" valign="top" class="float-left">
                <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="float-left">
                  <tr>
                    <td align="left" valign="top">
                      <table width="560" border="0" cellspacing="0" cellpadding="0" class="float-left">
                        <tr>
                          <td height="1" colspan="2" align="left" valign="top" class="hide" style="line-height:0px; font-size:0px;">
                            <!--[if gte mso 15]>&nbsp;<![endif]-->
                          </td>
                          <td width="240" rowspan="2" align="center" valign="top" class="imageSpacer">
                            <a href="" target="_blank"><img src="http://fastart.nature.com/A39731/cover.png" width="240" height="316" alt="Nature Outlook" class="img-link" border="0"/></a>
                            <p class="mobile-center" style="font-family: Arial, serif; font-size:11px; line-height:18px; color:#a0a0a0; text-align:right; padding-top:5px;"><strong>Published in the <span class="appleLinks">27 April</span> issue of <em>Nature</em></strong></p>
                          </td>
                        </tr>
                        <tr>
                          <td width="300" align="left" valign="top" class="float-left">
                            <table width="300" border="0" cellspacing="0" cellpadding="0" class="float-left">
                              <tr>
                                <td align="left">
                                  <table width="110" border="0" cellspacing="0" align="left" cellpadding="0" bgcolor="#d8d8d8" class="float-left">
                                    <tbody>
                                      <tr>
                                        <td height="30" align="center" class="h1"><a href="https://www.nature.com/" target="_blank" style="color:#424242; text-decoration:none;"><em>Free online ></em></a>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td height="20">&nbsp;</td>
                              </tr>
                              <tr>
                                <td align="left" class="h1">Adequate access to food is a universal right, but eliminating all forms of malnutrition in a growing world is no small task. This <em>Outlook</em> discusses:</td>
                              </tr>
                              <tr>
                                <td height="20">&nbsp;</td>
                              </tr>
                              <tr>
                                <td align="left" class="p"><span style="font-size:12px;">&bull;</span>&nbsp;&nbsp;How tinkering with <a href="https://www.nature.com/" target="_blank" class="links">photosynthesis</a> could make food crops more efficient.<br /><br /><span style="font-size:12px;">&bull;</span>&nbsp;&nbsp;The nutritional, environmental and taste credentials of sustainable alternatives to meat, and whether they can tempt us away from beef. <br /><br /><span style="font-size:12px;">&bull;</span>&nbsp;&nbsp;The robotic and sensing <a href="https://www.nature.com/" target="_blank" class="links">technologies</a> that will drive the next big revolution in agriculture. </td>
                              </tr>
                            </table>
                          </td>
                          <td width="20" align="left" valign="top" class="hide">&nbsp;</td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td height="20">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="left">
                       <table border="0" cellspacing="0" align="left" cellpadding="0" bgcolor="#f39756" class="float-left">
                        <tbody>
                          <tr>
                            <td class="white-cta"><a href="https://www.nature.com/" target="_blank" class="links-white">Read more &ndash; access the <em>Outlook</em> today &gt;</a>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      </td>
                  </tr>
                  <tr>
                    <td height="45" align="left" valign="top">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="left" valign="top">
                      <table width="155" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                          <tr>
                            <td width="155" align="left" valign="top" class="p10px"><strong>Produced with support from:</strong></td>
                          </tr>
                          <tr>
                            <td height="4" style="font-size:1px; height:4px">&nbsp;</td>
                          </tr>
                          <tr>
                            <td height="20" style="border-top: 1px solid #dadada">&nbsp;</td>
                          </tr>
                          <tr>
                            <td align="left" valign="top"><a href="" target="_blank"><img src="http://fastart.nature.com/A39731/sponsor.png" width="142" height="41" alt="Nestle" class="img-link" border="0" /></a></td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td height="25">&nbsp;</td>
                  </tr>
                </table>
              </td>
              <td width="20">&nbsp;</td>
            </tr>
          </table>
          <!-- // content box  -->
          <!-- banner -->
          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="fit-width" bgcolor="#ffffff">
            <tr>
              <td align="center" valign="top"><img src="http://fastart.nature.com/A39731/footer_image.png" width="600" height="50" alt="Nature Outlook" border="0" class="img-link fit-width" /></td>
            </tr>
            <tr>
              <td height="15" style="font-size:1px; height:15px">&nbsp;</td>
            </tr>
          </table>
          <!-- // banner -->
          <!-- social bar -->
          <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="fit-width">
            <tr>
              <td width="20">&nbsp;</td>
              <td width="560" align="left" valign="top" class="float-left">
                <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="float-left">
                  <tr>
                    <td width="121">
                    <table width="121" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="22" align="right" valign="middle"><a href="https://www.facebook.com/nature" target="_blank"><img src="http://fastart.nature.com/A39731/fb2.png" width="22" height="22" alt="FB" class="img-link" border="0" /></a></td>
                          <td width="10">&nbsp;</td>
                          <td width="25" align="left" valign="middle"><a href="https://twitter.com/NatureOutlook" target="_blank"><img src="http://fastart.nature.com/A39731/twitter2.jpg" width="25" height="25" alt="Twitter" class="img-link" border="0" /></a></td>
                          <td width="14">&nbsp;</td>
                          <td width="50" align="left" valign="middle"><a href="https://www.linkedin.com/company-beta/7131/" target="_blank"><img src="http://fastart.nature.com/A39731/linkedin3.png" width="24" height="22" alt="Linkedin" class="img-link" border="0" /></a></td>
                        </tr>
                      </tbody>
                    </table></td>
                    <td width="289">&nbsp;</td>
                    <td width="150">
                    <table width="150" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td align="center" valign="middle"><a href="http://www.springernature.com" target="_blank"><img src="http://fastart.nature.com/A39916/springer_nature_grey.png" width="150" height="14" alt="Springer Nature" class="img-link" border="0"/></a></td>
                        </tr>
                      </tbody>
                    </table></td>
                  </tr>
                </table>
              </td>
              <td width="20">&nbsp;</td>
            </tr>
          </table>
          <!-- // social bar  -->
          <!-- smallprint table -->
          <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="fit-width">
            <tr>
              <td width="20">&nbsp;</td>
              <td width="560" class="fit-width-block">
                <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="fit-width">
                  <tr>
                    <td height="25">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="left" class="smallprint">As a registered user of Nature Publishing Group’s Web sites, our database indicates that you have opted-in to receive product information and special offers. If you no longer wish to receive these e-mails or to discontinue all e-mail services from Nature Publishing Group please update your online account. <a href="http://www.nature.com/nams/svc/myaccount" target="_blank" class="links-grey">Modify My Account</a> (Log in to be recognised as a <a href="http://www.nature.com/?WT.i_dcsvid=%25%25LIST_ID%25%25-%25%25RECIPIENT_ID%25%25&WT.ec_id=MARKETING" target="_blank" class="links-grey">Nature.com</a> registrant).</td>
                  </tr>
                  <tr>
                    <td height="15px" align="left" style="font-size:1px; height:15px">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="left" class="smallprint">For further information on <a href="mailto:registration@nature.com" class="links-grey">technical assistance</a> | <a href="mailto:subscriptions@nature.com" class="links-grey">print subscriptions</a> | <a href="mailto:feedback@nature.com" class="links-grey">other enquiries</a>.</td>
                  </tr>
                  <tr>
                    <td height="15px" align="left" style="font-size:1px; height:15px">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="left" class="smallprint">Macmillan Publishers Limited is a company incorporated in England & Wales under company number 785998 & whose registered office is located at <a href="http://www.nature.com/npg_/contact/offices.html?WT.i_dcsvid=%25%25LIST_ID%25%25-%25%25RECIPIENT_ID%25%25&WT.ec_id=MARKETING" target="_blank" class="links-grey">The Campus, 4 Crinan Street, London, N1 9XW. Nature Research | One New York Plaza, Suite 4500 | New York | NY 10004-1562 | US</a></td>
                  </tr>
                  <tr>
                    <td height="15px" align="left" style="font-size:1px; height:15px">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="left" class="smallprint">&copy; 2017 Nature Research, a division of Macmillan Publishers Limited. All rights reserved.</td>
                  </tr>
                  <tr>
                    <td height="25">&nbsp;</td>
                  </tr>
                </table>
              </td>
              <td width="20">&nbsp;</td>
            </tr>
          </table>
          <!-- // smallprint table  -->
        </td>
      </tr>
    </table>
    <!-- // page container-->
  </body>
</html>