How to fix or normalise MJML output for Mailchimp? - html

So, I'm working on developing a newsletter using the MJML framework (which is pretty great by the way), which I'd ideally like to distribute using our company Mailchimp account. I'm by no means married to using MC but our infrastructure uses their forms and for any number of other reasons we'd rather keep MC than switch.
The issue I'm beginning to run into is that the different email platforms seem to be processing the HTML output by the MJML in different ways. Putsmail seems to render closest to my expectations, but Mailchimp and inexplicably Mailjet each have their own separate rendering issues.
With Mailchimp, the main issue I have is that my hero section is rendered incorrectly in Outlook 365, with the image incorrectly placed. I am sure this is a Mailchimp issue as Outlook renders the Putsmail and Mailjet sections correctly. So, what I am wondering is what is making MC choke on my HTML and how can I compensate for this?
EDIT:
Trimmed HTML of the Relevant Section:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-
size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-66 { width:66.66666666666666% !important; max-width: 66.66666666666666%; }
.mj-column-per-33 { width:33.33333333333333% !important; max-width:
33.33333333333333%; }
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-25 { width:25% !important; max-width: 25%; }
.mj-column-per-75 { width:75% !important; max-width: 75%; }
}
</style>
<style type="text/css">
#media only screen and (max-width:480px) {
table.full-width-mobile { width: 100% !important; }
td.full-width-mobile { width: auto !important; }
}
</style>
</head>
<body style="background-color:#d7dde5;">
<div
style="background-color:#d7dde5;"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:399.99999999999994px;"
>
<![endif]-->
<div
class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;"
><span style="font-size: 11px">[[HEADLINE]]</span></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
class="" style="vertical-align:top;width:199.99999999999997px;"
>
<![endif]-->
<div
class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="right" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:right;color:#000000;"
><span style="font-size: 11px">[[PERMALINK_LABEL]]</span></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:199.99999999999997px;"
>
<![endif]-->
<div
class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:125px;">
<img
alt="GreenTec Capital Logo" height="auto" src="https://drive.google.com/uc?id=1oACJyNhnHMAqDTNlQCne1-Y4feLhCwZi" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="125"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
class="" style="vertical-align:top;width:399.99999999999994px;"
>
<![endif]-->
<div
class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"
>Portfolio UpdatesInvestment Opportunities</div></td></tr></table></div><!--[if mso | IE]></td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<v:image
style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" src="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" xmlns:v="urn:schemas-microsoft-com:vml"
/>
<![endif]-->
<div
style="margin:0 auto;max-width:600px;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tr
style="vertical-align:top;"
>
<td
background="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" style="background:#ffffff url(https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu) no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;" height="300"
>
<!--[if mso | IE]>
<table
border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="">
<![endif]-->
<div
class="mj-hero-content" style="margin:0px auto;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tr>
<td style="" >
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:125px;padding-bottom:10px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:center;color:#ffffff;"
><span style="font-size: 30px; line-height: 30px;">GreenTec Capital Partners</span><br/><br/>Investor Newsletter</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
Garbled Mailchimp HTML for the Same Section:
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><meta http-equiv="x-ua-compatible" content="IE=edge">
<!--
<![endif]--><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!--[if lte mso 11]><style>.outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
<!--[if !mso]>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<!--
<style>
</style>
<![endif]-->
<style type="text/css">
#outlook a{
padding:0;}
body{margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}p{display:block;
margin:13px 0;
}#outlook a{padding:0;
}body{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}p{display:block;margin:13px 0;
}#media only screen and (min-width:480px){
.mj-column-per-66{width:66.666666666667% !important;
max-width:66.666666666667%;
}} #media only screen and (min-width:480px){
.mj-column-per-33{
width:33.333333333333% !important;
max-width:33.333333333333%;
}} #media only screen and (min-width:480px){
.mj-column-per-100{
width:100% !important;
max-width:100%;
}} #media only screen and (min-width:480px){
.mj-column-per-25{
width:25% !important;
max-width:25%;}
} #media only screen and (min-width:480px){
.mj-column-per-75{
width:75% !important;
max-width:75%;
}} #outlook a{
padding:0;
}
body{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;}
p{display:block;
margin:13px 0;}
#media only screen and (min-width:480px){
.mj-column-per-66{
width:66.666666666667% !important;
max-width:66.666666666667%;
}} #media only screen and (min-width:480px){
.mj-column-per-33{
width:33.333333333333% !important;
max-width:33.333333333333%;
}} #media only screen and (min-width:480px){
.mj-column-per-100{
width:100% !important;
max-width:100%;
}} #media only screen and (min-width:480px){
.mj-column-per-25{
width:25% !important;
max-width:25%;
}} #media only screen and (min-width:480px){
.mj-column-per-75{
width:75% !important;
max-width:75%;
}} #media only screen and (max-width:480px){
table.full-width-mobile{
width:100% !important;
}} #media only screen and (max-width:480px){
td.full-width-mobile{
width:auto !important;
}}</style></head>
<body style="background-color: #d7dde5;margin: 0;padding: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"><div style="background-color:#d7dde5;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tbody>
<tr>
<td style="direction: ltr;font-size: 0px;padding: 20px 0;text-align: center;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:399.99999999999994px;"><![endif]--><div class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="left" style="font-size: 0px;padding: 10px 25px;padding-top: 0;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;"><span style="font-size: 11px">[[HEADLINE]]</span>
</div></td></tr></table></div><!--[if mso | IE]></td><td style="vertical-align:top;width:199.99999999999997px;"><![endif]--><div class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%">
<tr>
<td align="right" style="font-size: 0px;padding: 10px 25px;padding-top: 0;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"> <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:right;color:#000000;"><span style="font-size: 11px">[[PERMALINK_LABEL]]</span>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff;background-color: #ffffff;width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tbody>
<tr>
<td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="direction: ltr;font-size: 0px;padding: 20px 0;text-align: center;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:199.99999999999997px;"><![endif]--><div class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 10px;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse;border-spacing: 0px;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="width: 125px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><img alt="GreenTec Capital Logo" src="https://drive.google.com/uc?id=1oACJyNhnHMAqDTNlQCne1-Y4feLhCwZi" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="125"></td></tr></tbody></table></td>
</tr></table></div><!--[if mso | IE]></td><td style="vertical-align:top;width:399.99999999999994px;"><![endif]--><div class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 10px;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Portfolio UpdatesInvestment Opportunities</div></td></tr></table></div><!--[if mso | IE]></td></tr></table>
<![endif]--></td></tr></tbody></table></div>
<!--[if mso | IE]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600">
<tr>
<td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<v:image style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:;" src="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" xmlns:v="urn:schemas-microsoft-com:vml" />
<![endif]-->
<div style="margin:0 auto;max-width:600px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tr style="vertical-align:top;">
<td background="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" style="background: #ffffff url('https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu') no-repeat center;background-position: center;background-repeat: no-repeat;padding: 0px;vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" height="300">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td><![endif]--><div class="mj-hero-content" style="margin:0px auto;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;margin: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tr><td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;margin: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 125px;padding-bottom: 10px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:center;color:#ffffff;"><span style="font-size: 30px; line-height: 30px;">GreenTec Capital Partners</span><br><br>Investor Newsletter</div></td></tr></table></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></table></div><!--[if mso | IE]></td></tr> </table><![endif]-->

Related

HTML Email background image not displaying full width

I'm building a HTML email with two background images. The email has a width of 600px.
Both images have dimensions of 600 x 786px and I've managed to get the first background image to fill the width of the parent table.
However the second image, that has the exact same dimensions as the first isn't displaying well, you can see it's half cut off.
Any guidance would be greatly appreciated.
Code below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head></head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" style="margin:0; padding:0">
<!-- /// MSO code to set the DPI at 96 to help resolve DPI scaling issues /// -->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
span.MsoHyperlink, span.MsoHyperlinkFollowed {mso-style-priority:99;color:inherit;}
a {color:inherit; text-decoration:none;}
.ReadMsgBody, .ExternalClass {width:100%;}
.ExternalClass * {line-height:110%;}
body {width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table {border-collapse:collapse!important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
.gmailfix {display:none; display:none!important;}
span > a, sup > a, span > a > sup {color:inherit!important; text-decoration:none;}
.footer span > a {color:#333333!important;}
[office365] button { display: block !important; margin:0 !important; padding:0 !important; }
[office365] div { display: block !important }
[owa] .m-show img { display:none!important; }
/*Responsive Styling*/
#media only screen and (max-width: 480px) {
.MainTable {width:100%!important;min-width:320px!important;}
.main-padding {padding:0px!important;}
html, body {width:100%!important; min-width:100%!important;}
[owa] .m-show img { display:block!important; }
.m-hide, .m-hide * {display:none!important; height:0!important; width:0px!important; visibility:hidden!important; line-height:0px!important; font-size:0px!important;}
.m-show {display:block!important; max-height:none!important;}
.float-left {float:left!important; clear:none!important;}
.float-right {float:right!important; clear:none!important;}
.half-width {width:48%!important; display:inline-block!important;}
.block, .drop, .drop tbody, .drop table, .drop tr {float:none!important; width:100%!important; padding:0!important; display:block!important;}
.center {text-align:center!important;} .align-left {text-align:left!important;} .align-right {text-align:right!important;} .absolute {position:absolute!important;}
table.block, table.drop, .drop table, .drop tbody {display:table!important;}
tr.block, tr.drop, .drop tr {display:table-row!important;}
td.block, td.drop, .drop td {display:table-cell!important;}
.center > img, img.center, .align-left > img, img.align-left, .align-right > img, img.align-right {display:inline-block!important;}
.center table.center, .align-right > table, .align-left > table {display:inline-table!important;}
.background-none {background:transparent!important;}
.background-image-none {background-image:none!important;}
.text-size {line-height:120%!important;} .text-size-10px {font-size:10px!important;}
.text-size-11px {font-size:11px!important;} .text-size-12px {font-size:12px!important;}
.text-size-13px {font-size:13px!important;} .text-size-14px {font-size:14px!important;}
.text-size-15px {font-size:15px!important;} .text-size-16px {font-size:16px!important;}
.text-size-17px {font-size:17px!important;} .text-size-18px {font-size:18px!important;}
.text-size-19px {font-size:19px!important;} .text-size-20px {font-size:20px!important;}
.text-size-21px {font-size:21px!important;} .text-size-22px {font-size:22px!important;}
.text-size-23px {font-size:23px!important;} .text-size-24px {font-size:24px!important;}
.text-size-25px {font-size:25px!important;} .text-size-26px {font-size:26px!important;}
.text-size-27px {font-size:27px!important;} .text-size-28px {font-size:28px!important;}
.text-size-29px {font-size:29px!important;} .text-size-30px {font-size:30px!important;}
.width-100 {width:100%!important; height:auto!important;}
.width-90 {width:90%!important; height:auto!important;}
.width-80 {width:80%!important; height:auto!important;}
.width-70 {width:70%!important; height:auto!important;}
.width-60 {width:60%!important; height:auto!important;}
.width-50 {width:50%!important; height:auto!important;}
.width-40 {width:40%!important; height:auto!important;}
.width-30 {width:30%!important; height:auto!important;}
.width-20 {width:20%!important; height:auto!important;}
.width-0 {width:0px!important; height:auto!important;}
.width-auto {width:auto!important;}
.height-auto {height:auto!important;}
.padding-0 {padding:0!important;} .padding-5 {padding:5px!important;}
.padding-10 {padding:10px!important;} .padding-15 {padding:15px!important;}
.padding-20 {padding:20px!important;} .padding-25 {padding:25px!important;} .padding-30 {padding:30px!important;}
.padding-horz-0 {padding-left:0px !important; padding-right:0px !important;}
.padding-horz-5 {padding-left:5px!important; padding-right:5px!important;}
.padding-horz-10 {padding-left:10px!important; padding-right:10px!important;}
.padding-horz-15 {padding-left:15px!important; padding-right:15px!important;}
.padding-horz-20 {padding-left:20px!important; padding-right:20px!important;}
.padding-horz-25 {padding-left:25px!important; padding-right:25px!important;}
.padding-horz-30 {padding-left:30px!important; padding-right:30px!important;}
.padding-vert-0 {padding-top:0px!important; padding-bottom:0px!important;}
.padding-vert-5 {padding-top:5px!important; padding-bottom:5px!important;}
.padding-vert-10 {padding-top:10px!important; padding-bottom:10px!important;}
.padding-vert-15 {padding-top:15px!important; padding-bottom:15px!important;}
.padding-vert-20 {padding-top:20px!important; padding-bottom:20px!important;}
.padding-vert-25 {padding-top:25px!important; padding-bottom:25px!important;}
.padding-vert-30 {padding-top:30px!important; padding-bottom:30px!important;}
.padding-right-0 {padding-right:0px!important;}
.padding-right-5 {padding-right:5px!important;} .padding-right-10 {padding-right:10px!important;}
.padding-right-15 {padding-right:15px!important;} .padding-right-20 {padding-right:20px!important;}
.padding-right-25 {padding-right:25px!important;} .padding-right-30 {padding-right:30px!important;}
.padding-left-0 {padding-left:0px !important;}
.padding-left-5 {padding-left:5px !important;} .padding-left-10 {padding-left:10px !important;}
.padding-left-15 {padding-left:15px !important;} .padding-left-20 {padding-left:20px !important;}
.padding-left-25 {padding-left:25px !important;} .padding-left-30 {padding-left:30px !important;}
.padding-top-0 {padding-top:0px!important;} .padding-top-5 {padding-top:5px!important;}
.padding-top-10 {padding-top:10px!important;} .padding-top-15 {padding-top:15px!important;}
.padding-top-20 {padding-top:20px!important;} .padding-top-25 {padding-top:25px!important;} .padding-top-30 {padding-top:30px!important;}
.padding-left-25 {padding-left:25px!important;}
.padding-right-25 {padding-right:25px!important;}
.padding-bottom-0 {padding-bottom:0px!important;}
.padding-bottom-5 {padding-bottom:5px!important;} .padding-bottom-10 {padding-bottom:10px !important;}
.padding-bottom-15 {padding-bottom:15px !important;} .padding-bottom-20 {padding-bottom:20px !important;}
.padding-bottom-25 {padding-bottom:25px !important;} .padding-bottom-30 {padding-bottom:30px !important;}
/*Styles Specific to this Email*/
.bg_mob { width:100%!important; height:auto!important; background:url(images/bg_mobile.jpg) no-repeat center #FFFFFF!important; background-size:contain!important; background-position:right top !important;}
</style>
<!--Superscript Styling to apply specific CSS for outlook-->
<!--[if gte mso 9]>
<style type="text/css">
sup {vertical-align: baseline; position: relative; top: -0.4em; font-size:85%;}
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
sup {vertical-align: top; font-size:50%; }
</style>
<!--<![endif]-->
<!--END SUPERSCRIPT STYLING-->
<!--TELEPHONE NUMBER-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="main-padding" bgcolor="#ffffff">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px;">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" class="padding-horz-20 padding-top-10" style="padding:0px 43px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="right" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; color:#999999; mso-line-height-rule:exactly;">
888-336-4764
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--NAV BAR-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="padding-0" style="padding:0 10px;">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="padding-vert-0" style="padding:15px 0;" valign="top">
<!--Logo-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left">
<tbody>
<tr>
<td style="font-size:17px; line-height:22px; color:#ffffff; padding:0 20px 0px;">
<a href="">
<img src="https://image.ibb.co/kgxmEe/logo.png" alt="tempur" width="140" height="70" style="display:block;" border="0">
</a>
</td>
</tr>
</tbody>
</table>
<!--Menu Start-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000 padding:0 42px 0px;;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<!--Menu End-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--HERO-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<td height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/kAmc4e/herobg.png">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
<v:fill type="tile" src="https://image.ibb.co/kAmc4e/herobg.png" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
<img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!--LEGACY-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<td width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/fGSBn9/legacytest.png" style="width:640px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
<v:fill type="tile" src="class="bg_mob" width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/f4Cxup/legacytest1.png" style="width:640px;"" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
Legaxy
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!--FIX FOR GMAIL iOS app issues -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0; color:#ffffff; background-color:#ffffff;">
</div>
</body>
</html>

You need to use background-size: 100% 100%; and height:786px and your second image have white background already
So use image without white background and add content or height to second td where you applied background image.

The image is not cut, it has some whitespace in it, and its dimension is 1000x768px https://image.ibb.co/fGSBn9/legacytest.png.
instead use css background-position: top center that will fix the issue. please have a look at the below-working snippet, hope it helps :)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<tr>
<td width="640" height="768" align="left" valign="top" style="background: #ffffff url('https://image.ibb.co/fGSBn9/legacytest.png') top center">Legacy</td>
</tr>
</table>
</td>
</tr>
</table>

You need to use background-size: cover; property to fix it. According to the docs
The background-size property specifies the size of the background
images.
There are four different syntaxes you can use with this property:
the keyword syntax ("auto", "cover" and "contain"),
the one-value syntax (sets the width of the image (height becomes "auto"),
the two-value syntax (first value: width of the image, second value: height), - the multiple background syntax (separated with comma).

HTML email font size decrease on mobile because of header navigation

All:
When I include a header navigation bar which is made up of inline jpegs in my html email, the fonts in the rest of the email render incredibly small regardless of my media queries. When I remove the header bar they render fine.
So there is something about the way that I have built the header that is causing this weird issue and I have tried every possible (in my mind) permutation and can't find a fix. Help would be much appreciated.
Here are screen shots of the mobile email with and without the header.
https://ibb.co/g1i9vH
https://ibb.co/fy8W9c
And here is my code:
<!-- Helm Email Template -->
<!DOCTYPE html>
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MEDIA QUERIES */
#media screen and (max-width: 480px) {
.mobile-hide {
display: none !important;
}
.mobile-center {
text-align: center !important;
}
.text-resp {
font-size: 14px!important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
<body style="margin: 0 !important; padding: 0 !important; background-color: #ffffff;" bgcolor="#ffffff">
<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus dolor aliquid omnis consequatur est deserunt, odio neque blanditiis aspernatur, mollitia ipsa distinctio, culpa fuga obcaecati!
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<!-- Start Header -->
<tr>
<td align="center" style="width: background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="red" height="30">
<tr>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:99px;" src="https://image.ibb.co/bODCyS/header_menu_men.png" alt="Men">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:122px;" src="https://image.ibb.co/gSEwQ7/header_menu_women.png" alt="Women">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 148px;" src="https://image.ibb.co/gc0357/header_logo.png" alt="Helm">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 123px;" src="https://image.ibb.co/iEU7Xn/header_menu_supply.png" alt="Supply">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 108px;" src="https://image.ibb.co/nMdedS/header_menu_sale.png" alt="Sale">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Header -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 1: Hero Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/iTNSXn/content_image_1.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 1: Hero Image -->
<!-- Start Section 2: Proof Point #1 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/bRxrqH/helm_email_1_section_2_img_1.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Image -->
<!-- Start Section 2: Proof Point #1 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<p class="text-resp" style="font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
HELM boots don’t complete your look, they make it. Every pair has been designed with simplicity in mind, making them perfect for every style and occasion.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Copy -->
<!-- Start Section 2: Proof Point #2 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/b1zkjc/helm_email_1_section_2_img_2.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Image -->
<!-- Start Section 2: Proof Point #2 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Reliable boots that look good are hard to come by. We combine a timeless aesthetic with the best materials on earth to create boots that are designed to fit your style for years to come.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Copy -->
<!-- Start Section 2: Proof Point #3 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/hjN2xx/helm_email_1_section_2_img_3.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Image -->
<!-- Start Section 2: Proof Point #3 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
We want you to love your first pair of HELM boots. We offer free shipping and free exchanges until you find that perfect pair. And of course, returns are on us too.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img class="g-img" style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; width: 100%; max-width: 600px;" src="https://image.ibb.co/huJZCn/content_image_2.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Some say clothes make the man, we think it’s the boots. Our boots give men confidence from the ground up, confidence to take steps they’ve never taken before.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 4: Shop Muller Teak -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; max-width: 450px; width: 100%" src="https://image.ibb.co/m9QZdS/content_image_3.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 4: Shop Muller Teak -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Footer Jargon -->
<tr>
<td align="left" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
Copyright © 2018 HELM Boots. All rights reserved.<br>You are receiving this email because you signed up at www.helmboots.com
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
HELM Boots<br> 1200 East 11th St. <br>Suite 101 <br>Austin, TX 78701
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
<a style="text-decoration: none; color: #3d3d3d;" href="*|UNSUB|*">Unsubscribe from this list</a> <a style="text-decoration: none; color: #3d3d3d;" href="#">Update subscription preferences</a>
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Footer Jargon -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>

HTML Email Footer Not Rendering Correctly on Desktop (Gmail)

I'm an HTML/CSS newbie and am using a free program called Topol.io to create an HTML footer for an email I'm going to send (in EMMA).
On the Topol site, in Preview mode, it looks correct on both desktop and mobile (2 rows of four buttons across on desktop, one stacked column of buttons on mobile).
However, when I send a test email to myself (in Gmail, on desktop), the buttons are stacked instead of in two rows of 4.
Can someone point out what's wrong with my code? I know it's something to do with the screen size code but I'm not just sure exactly what the change is.
Here's the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings></xml><![endif]-->
<!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-25 {
width: 25% !important;
}
}
</style>
</head>
<body style="background: #FFFFFF;">
<div class="mj-container" style="background-color:#FFFFFF;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="background:#7784C3;font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:26px 0px 26px 0px;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/new-parent-baby/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Programs</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/contact-us/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Contact</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Schedule</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/curriculum/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Preschool</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Events</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/what-we-do/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">About Us</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/birthdays/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Parties</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/blog/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:17px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Blog</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
Thank you in advance!!

Random Lines Appearing in HTML Email on outlook 2016

We've been using mailchimp for creating simple email templates then exporting the code and using it in other clients to send those ones out. The problem im having are these random lines under certain tables and between others. I've tried adding a blank <td> with black background colour and specific width and heights but that doesn't seem to get rid of the white lines. Here is what the part at the bottom looks like in office 2016:
Ignore the yellow highlight text
This is what it looks like on other email clients and browsers:
Apologies for the poor quality but as you can see there are white lines under the text tables and between the text and buttons. Here is my 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head><!--[if gte mso 15]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--><!--[if gt mso 15]> <style type="text/css" media="all"> /* Outlook 2016 Height Fix */ table, tr, td{border-collapse: collapse;}tr{font-size:0px; line-height:0px; border-collapse: collapse;}</style><![endif]--> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>An Athena for Every Situation</title> <style type="text/css"> p{margin:10px 0; padding:0;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{display:block; margin:0; padding:0;}img,a img{border:0; height:auto; outline:none; text-decoration:none;}body,#bodyTable,#bodyCell{height:100%; margin:0; padding:0; width:100%;}.mcnPreviewText{display:none !important;}#outlook a{padding:0;}img{-ms-interpolation-mode:bicubic;}table{mso-table-lspace:0; mso-table-rspace:0;}.ReadMsgBody{width:100%;}.ExternalClass{width:100%;}p,a,li,td,blockquote{mso-line-height-rule:exactly;}a[href^=tel],a[href^=sms]{color:inherit; cursor:default; text-decoration:none;}p,a,li,td,body,table,blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{line-height:100%;}a[x-apple-data-detectors]{color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;}#bodyCell{padding:10px;}.templateContainer{max-width:600px !important;}a.mcnButton{display:block;}.mcnImage{vertical-align:bottom;}.mcnTextContent{word-break:break-word;}.mcnTextContent img{height:auto !important;}.mcnDividerBlock{table-layout:fixed !important;}body,#bodyTable{background-color:#ffffff;}#bodyCell{border-top:0;}.templateContainer{border:0;}h1{color:#202020; font-family:Helvetica; font-size:26px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}h2{color:#202020; font-family:Helvetica; font-size:22px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}h3{color:#202020; font-family:Helvetica; font-size:20px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}h4{color:#202020; font-family:Helvetica; font-size:18px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}#templatePreheader{background-color:#ffffff; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px;}#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{color:#656565; font-family:Helvetica; font-size:12px; line-height:150%; text-align:left;}#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{color:#656565; font-weight:normal; text-decoration:underline;}#templateHeader{background-color:#ffffff; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-bottom:0;}#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{color:#000000; font-family:Helvetica; font-size:16px; line-height:150%; text-align:left;}#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{color:#2BAADF; font-weight:normal; text-decoration:underline;}#templateBody{background-color:#000000; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:0; padding-bottom:0;}#templateBody .mcnTextContent,#templateBody .mcnTextContent p{color:#202020; font-family:Helvetica; font-size:16px; line-height:150%; text-align:left;}#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{color:#2BAADF; font-weight:normal; text-decoration:underline;}#templateColumns{background-color:#000000; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:2px solid #EAEAEA; padding-top:0; padding-bottom:9px;}#templateColumns .columnContainer .mcnTextContent,#templateColumns .columnContainer .mcnTextContent p{color:#FFF; font-family:Helvetica; font-size:12px; line-height:150%; text-align:left;}#templateColumns .columnContainer .mcnTextContent a,#templateColumns .columnContainer .mcnTextContent p a{color:#2BAADF; font-weight:normal; text-decoration:underline;}#templateFooter{background-color:#000000; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px;}#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{color:#656565; font-family:Helvetica; font-size:12px; line-height:150%; text-align:center;}#templateFooterSage .mcnTextContent a,#templateFooter .mcnTextContent p a{color:#656565; font-weight:normal; text-decoration:underline;}#templateFooterSage .mcnTextContent,#templateFooter .mcnTextContent p{color:#656565; font-family:Helvetica; font-size:12px; line-height:150%; text-align:center;}#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{color:#656565; font-weight:normal; text-decoration:underline;}</style></head> <body> <span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">An Athena for Every Situation</span> <center> <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> <tr> <td align="center" valign="top" id="bodyCell"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> <tr> <td align="center" valign="top" width="600" style="width:600px;"><![endif]--> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer"> <tr> <td valign="top" id="templatePreheader"><table class="mcnTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnTextBlockOuter"> <tr> <td class="mcnTextBlockInner" style="padding-top:9px;" valign="top"><!--[if mso]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;"> <tr><![endif]--><!--[if mso]> <td valign="top" width="210" style="width:210px;"><![endif]--> <table style="max-width:210px;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left" > <tbody><tr> <td class="mcnTextContent" style="padding-top:0; padding-left:18px; padding-bottom:9px; padding-right:18px;" valign="top"> </td></tr></tbody></table><!--[if mso]> </td><![endif]--><!--[if mso]> <td valign="top" width="390" style="width:390px;"><![endif]--> <table style="max-width:390px;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" style="padding-top:0; padding-left:18px; padding-bottom:9px; padding-right:18px;" valign="top"> View this email in your browser </td></tr></tbody></table><!--[if mso]> </td><![endif]--><!--[if mso]> </tr></table><![endif]--> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateHeader"><table class="mcnImageBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnImageBlockOuter"> <tr> <td style="padding:0px" class="mcnImageBlockInner" valign="top"> <table class="mcnImageContentContainer" style="min-width:100%; border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0; text-align:center;" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/2dc82f25-c77f-4372-a010-f0788c2f0d37.jpg" style="max-width:900px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage" width="600" align="middle"> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateBody"><table class="mcnBoxedTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"><![endif]--> <tbody class="mcnBoxedTextBlockOuter"> <tr> <td class="mcnBoxedTextBlockInner" valign="top"><!--[if gte mso 9]> <td align="center" valign="top" "><![endif]--> <table style="min-width:100%; border-collapse: collapse;" class="mcnBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;"> <table class="mcnTextContentContainer" style="min-width: 100% !important;background-color: #000000;border: 20px none;" width="100%" cellspacing="0" cellpadding="18" border="0"> <tbody><tr> <td class="mcnTextContent" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;line-height: 100%;text-align: center;" valign="top"> <span style="font-size:27px"><span style="color: #FFFFFF;"><span style="font-family:merriweather sans,helvetica neue,helvetica,arial,sans-serif">An Athena for <strong>EVERY</strong> situation</span></span></span> </td></tr></tbody></table> </td></tr></tbody></table><!--[if gte mso 9]> </td><![endif]--><!--[if gte mso 9]> </tr></table><![endif]--> </td></tr></tbody> </table><table class="mcnTextBlock" style="min-width:100%; border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnTextBlockOuter"> <tr> <td class="mcnTextBlockInner" style="padding-top:9px;" valign="top"><!--[if mso]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;"> <tr><![endif]--><!--[if mso]> <td valign="top" width="600" style="width:600px;"><![endif]--> <table style="max-width:100%; min-width:100%;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top"> <div style="text-align: center;"><span style="color:#FFFFFF">NEW RELEASES OUT NOW</span></div></td></tr></tbody></table><!--[if mso]> </td><![endif]--><!--[if mso]> </tr></table><![endif]--> </td></tr></tbody> </table><table class="mcnImageBlock" style="min-width:100%; border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnImageBlockOuter"> <tr> <td style="padding:9px" class="mcnImageBlockInner" valign="top"> <table class="mcnImageContentContainer" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnImageContent" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0; text-align:center;" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/c0528a15-f340-4211-bb27-530086ff99ca.png" style="max-width:1087px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage" width="564" align="middle"> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateColumns"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> <tr> <td align="center" valign="top" width="200" height="95" style="width:200px; height:95px;"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" height="95" class="columnWrapper"> <tr> <td valign="top" class="columnContainer"><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionBottomContent" style="border-collapse: collapse;" width="false" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" valign="top" align="center"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/1810cbf7-1d5c-4fbb-901c-ba3394c2bad0.jpg" style="max-width:106px;" class="mcnImage" width="106"> </td></tr><tr> <td class="mcnTextContent" style="padding:0 9px 0 9px; height:95px;" width="164" height="95" valign="top"> <span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#cc0033"><strong>Athena™ 850</strong></span><br><span style="color:#FFFFFF"><span style="font-size:12px">- Travels while raised<br>- Transportable by trailer<br>- Non marking tracks as standard</span></span></span><br></td></tr><tr><td></td></tr></tbody></table> </td></tr></tbody> </table></td></tr></table><!--[if gte mso 9]> </td><td align="center" valign="top" width="200" style="width:200px;"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper"> <tr> <td valign="top" class="columnContainer"><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionBottomContent" style="border-collapse: collapse;" width="false" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" valign="top" align="center"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/1810cbf7-1d5c-4fbb-901c-ba3394c2bad0.jpg" style="max-width:106px;" class="mcnImage" width="106"> </td></tr><tr> <td class="mcnTextContent" style="padding:0 9px 0 9px;" width="164" valign="top"> <span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#cc0033"><strong>Athena™ HE- New release</strong></span><br><span style="color:#FFFFFF"><span style="font-size:12px">- Fits through a door<br>- Indoor and outdoor use<br>- Self-levels on up to 20 degrees<br>- Transportable by trailer</span></span></span><br> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr></table><!--[if gte mso 9]> </td><td align="center" valign="top" width="200" style="width:200px;"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper"> <tr> <td valign="top" class="columnContainer"><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionBottomContent" style="border-collapse: collapse;" width="false" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" valign="top" align="center"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/1810cbf7-1d5c-4fbb-901c-ba3394c2bad0.jpg" style="max-width:106px;" class="mcnImage" width="106"> </td></tr><tr> <td class="mcnTextContent" style="padding:0 9px 0 9px;" width="164" valign="top"> <span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#cc0033"><strong>Athena™ EVO 10.90 - New release</strong></span><br><span style="color:#FFFFFF"><span style="font-size:12px">- New 10 metre working height<br>- Dynamic and Proactive Levelling capabilities<br>- Drives and self levels while in the air<br>- New larger basket design</span></span></span> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr></table><!--[if gte mso 9]> </td></tr></table><![endif]--> </td></tr><tr> <td valign="top" id="templateFooter"><table class="mcnBoxedTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"><![endif]--> <tbody class="mcnBoxedTextBlockOuter"> <tr> <td class="mcnBoxedTextBlockInner" valign="top"><!--[if gte mso 9]> <td align="center" valign="top" "><![endif]--> <table style="min-width:100%; border-collapse: collapse;" class="mcnBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;"> <table class="mcnTextContentContainer" style="min-width: 100% !important;background-color: #000000;" width="100%" cellspacing="0" cellpadding="18" border="0"> <tbody><tr> <td class="mcnTextContent" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" valign="top"> <span style="font-size:16px"><strong><span style="color: #CC0033;"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif">CLICK THROUGH TO DOWNLOAD A SPEC SHEET OR TO WATCH THE ATHENA™ IN ACTION</span></span></strong></span> </td></tr></tbody></table> </td></tr></tbody></table><!--[if gte mso 9]> </td><![endif]--><!--[if gte mso 9]> </tr></table><![endif]--> </td></tr></tbody> </table><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionLeftContentOuter" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="mcnCaptionLeftContentInner" style="padding:0 9px ;" valign="top"> <table class="mcnCaptionLeftImageContentContainer" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody><tr> <td class="mcnCaptionLeftImageContent" valign="top"> <img alt="" src="athena.jpg" style="max-width:709px;" class="mcnImage" width="264"> </td></tr></tbody></table> <table class="mcnCaptionLeftTextContentContainer" width="264" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" valign="top"> <div style="text-align: center;"><span style="font-size:14px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color: #FFFFFF;">For a full range of ASPAC Specialist Access equipment</span></span></span></div></td></tr></tbody></table> </td></tr></tbody></table> </td></tr></tbody> </table><table class="mcnDividerBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnDividerBlockOuter"> <tr> <td class="mcnDividerBlockInner" style="min-width:100%; padding:18px;"> <table class="mcnDividerContent" style="min-width: 100%;border-top: 2px solid #FFFFFF;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td> <span></span> </td></tr></tbody></table> </td></tr></tbody> </table><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionLeftContentOuter" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="mcnCaptionLeftContentInner" style="padding:0 9px ;" valign="top"> <table class="mcnCaptionLeftImageContentContainer" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody><tr> <td class="mcnCaptionLeftImageContent" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/d733278d-2c92-4a9f-9be1-4f0c6b5266a8.jpg" style="max-width:709px;" class="mcnImage" width="264"> </td></tr></tbody></table> <table class="mcnCaptionLeftTextContentContainer" width="264" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" valign="top"> <div style="text-align: center;"><span style="font-size:14px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color: #FFFFFF;">For a full range of ASPAC Specialist Access equipment</span></span></span></div></td></tr></tbody></table> </td></tr></tbody></table> </td></tr></tbody> </table><table class="mcnBoxedTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"><![endif]--> <tbody class="mcnBoxedTextBlockOuter"> <tr> <td class="mcnBoxedTextBlockInner" valign="top"><!--[if gte mso 9]> <td align="center" valign="top" "><![endif]--> <table style="min-width:100%;" class="mcnBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;"> <table class="mcnTextContentContainer" style="min-width: 100% !important;background-color: #DA2127;" width="100%" cellspacing="0" cellpadding="18" border="0"> <tbody><tr> <td class="mcnTextContent" style="color: #F2F2F2;font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;font-weight: normal;text-align: center;" valign="top"> <div style="text-align: center;"><span style="color:#FFFFFF"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><strong>After Sales Service: </strong></span></span></div><span style="color:#FFFFFF"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif">Maintenance agreements available 24 hour phone support</span></span> </td></tr></tbody></table> </td></tr></tbody></table><!--[if gte mso 9]> </td><![endif]--><!--[if gte mso 9]> </tr></table><![endif]--> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateFooterSage"> <table class="mcnDividerBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnDividerBlockOuter"> <tr> <td class="mcnDividerBlockInner" style="min-width:100%;padding:18px;"> <table class="mcnDividerContent" style="min-width:100%;border-top:2px solid #EAEAEA;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <span></span> </td></tr></tbody> </table> </td></tr></tbody> </table> <table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionRightContentOuter" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="mcnCaptionRightContentInner" style="padding:0 9px;" valign="top"> <table class="mcnCaptionRightImageContentContainer" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td class="mcnCaptionRightImageContent" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/0d9da147-38d0-4b35-b132-9798550e40f9.jpg" style="max-width:60px;" class="mcnImage" width="60"> </td></tr></tbody> </table> <table class="mcnCaptionRightTextContentContainer" width="396" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody> <tr> <td class="mcnTextContent" valign="top"> <br>info#sagemedia.com.au +61 8 6336 6430 www.sagemedia.com.au <tr> <td style="width:100px; height:20px;"></td></tr><tr class="unsub"> <td valign="top" align="center">click here to unsubscribe</td></tr></tr></td></tr></tbody> </table> </td></tr></tbody> </table> </td></tr></tbody> </table> </td></tr></table><!--[if gte mso 9]> </td></tr></table><![endif]--> </td></tr></table> </center> </body> </html>
Here is a JSFiddle with formatted html: https://jsfiddle.net/025ox8tp/1/
Thanks for the help. PS I had to minify the code in order to fit everything in.

Problem Solved!!! It turns out it was just one computer that had an issue with this email. Other computers using outlook didnt seem to have the problem and after re-installing outlook on his computer. Problem solved

This is only a workaround that works if it fits your template layout but I thought it would worth sharing.
I find out that the lines appearing are the same color as the background. Therefore setting the background color on the body would hide those imperfections ...
<style>
body { background: #000000; }
</style>

HTML/CSS email not formatting correctly on Windows in Outlook 10 or 13

I'm still pretty new to coding in general. I'm working off of a template that my predecessor made for this email, and it's rendering correctly in all email clients on Macs, but on Windows machines, Outlook 10 and Outlook 13 make the email margins shift to the left, and the body content extend incorrectly. I've identified where the problem is, and it's in the body of the email after the headline (the headline and footers are formatted properly, but the body is not.)
<div class="headline" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650px" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;" >
<![endif]-->
<!--[if (gte mso 14)|(IE)]>
<table width="650px" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;" >
<![endif]-->
<!--[if (gte mso 15)|(IE)]>
<table width="650px" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;" >
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px; background-color: #ffffff;">
<tr>
<td align="left" style="width: 100%; font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
<!--[if (gte mso 14)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="650px" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
<!--[if (gte mso 15)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="650px" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
Update
Now my code reads:
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100% "style="border-spacing:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;" >
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
<!--[if (gte mso 14)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="contents" style="border-spacing:0;">
<tr>
<td class="inner">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto;">
<tr>
<td width="5%"> </td>
<td width="100%" valign="top">
<![endif]-->
<!--[if (gte mso 15)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-spacing:0;">
<tr>
<td class="inner">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="contents" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="100%" valign="top">
<![endif]-->
And it's better, but there are still an issue with too much margin on the right, and it's more pronounced in Outlook 2013: