I have an email that used to render fine in iOS 8 and above but then suddenly, with no change to the template, the email does not render how it used to. It's like the email has been pushed to one side and there is a gap on the right that should not be there. And there are elements that aren't responding how they're supposed to.

When I resize my browser, it renders fine. I have also tried different meta tags but to no avail.

Please help! Thanks!!

This is how it's supposed to render:
This is how it's supposed to look

This is how it renders on iOS:
This is how it looks

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"/>
    <meta name="x-apple-disable-message-reformatting" />
    <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>