SB
0
Email is aligned slightly to the right, cannot seem to center it across all clients
Hi all, I was wondering if someone could help with my email alignment issue. I'm new to HTML emails and this has been quite a ride! The issue is that the main content is aligned slightly to the write within the whole email body. I would like it perfectly center. I've attached the full code below:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width" name="viewport">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Email</title>
</head>
<body class="" style="background-color: #f3f3f3;text-align: center; color: #30265D; font-family: Helvetica Neue, sans-serif;-webkit-font-smoothing: antialiased;color: #30265D;font-size: 14px;line-height: 1.4;margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;background-color: #f3f3f3;">
<!-- Header -->
<tr>
<td style="width: 5%;font-family: sans-serif;font-size: 16px !important;vertical-align: top;"></td>
<td style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;">
<table style="max-width: 580px;margin: 20px auto;vertical-align: bottom;border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;">
<tr>
<td style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;"><img height="65" src="https://marketing-image-production.s3.amazonaws.com/uploads/8bf664b241329da1b487909697ed9e01a336cad6923a848cac40f780d132ec6b22a6dde554ce42fd15d04d0c87838d3a90a252b68ad251d2ff097550364e9d13.png" style="border: none;-ms-interpolation-mode: bicubic;"></td>
<td style="font-family: sans-serif;font-size: 16px !important;vertical-align: center;">
<div style="height: 32px; width: 0; border: #30265D 1px solid; margin: 0 10px 0 10px"></div>
</td>
<td style="white-space: nowrap;padding-right: 20px;font-family: sans-serif;font-size: 16px !important;vertical-align: center;">
<a href="#" style="font-size: 14px;color: #30265D;text-decoration: none;"><img class="icon icons8-Ereader" height="20" src="https://marketing-image-production.s3.amazonaws.com/uploads/fa56cba81a538d5fe052b61b937201198370183a9dfbcc9c985d1a1b62fd9c4ccc6525d043cd9a988b54cafcbdb0e2d44c55964b5cee12ac6e07305a33815eb5.png" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%; vertical-align:bottom" width="20"> Schedule a lesson</a>
</td>
<td style="white-space: nowrap; padding-right: 20px;font-family: sans-serif;font-size: 16px !important;vertical-align: center;">
<a href="#" style="font-size: 14px;color: #30265D;text-decoration: none;"><img class="icon icons8-User" height="20" src="https://marketing-image-production.s3.amazonaws.com/uploads/7bc15ae28c9183b57e2543195b297e6702ce74fadbc56c5609de411d62011c20d21b43be6302965bd9ec885397054385178471dfa2057e8b7679f1e2a1ec2444.png" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%; vertical-align:bottom;" width="20"> Become a tutor</a>
</td>
<td style="white-space: nowrap; padding-right: 10px;font-family: sans-serif;font-size: 16px !important;vertical-align: center;">
<a href="#" style="font-size: 14px;color: #30265D;text-decoration: none;"><img class="icon icons8-Ratio" height="20" src="https://marketing-image-production.s3.amazonaws.com/uploads/c057abb590153f6663d037846fad483287e2196966bd84cd4fb5e7a2f18918d656cadbaf717166642459b4db6e22aa786be43381a518414b504ef1cca66d4889.png" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%; vertical-align:bottom;" width="20"> Earn 20% off</a>
</td>
</tr>
</table>
</td>
<td style="width: 0%"></td>
<!-- Header end -->
</tr>
<tr>
<td style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;display: block;max-width: 580px;padding: 0 !important;width: 100% !important;margin: 0 auto !important; color: #30265D;">
<div class="content" style="box-sizing: border-box;display: block;margin: 0 auto;max-width: 580px;padding: 0 !important;">
<!-- START CENTERED WHITE CONTAINER -->
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/3407db44804f6b2f26fc4ceac0781988fd9cdfdb45006294f4e0643fb3bb72b84891ecd1cd6edf48959748f0cf763cbc928ae84a6b13e63edb9e95b07e52b686.gif" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%;" width="100%">
<table class="main" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;background: #ffffff;border-radius: 0 !important;border-left-width: 0 !important;border-right-width: 0 !important; margin-top:-12px">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;box-sizing: border-box;padding: 20px !important;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;">
<tr>
<td style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;">
<h1 style="font-family: sans-serif;font-weight: 600;line-height: 1.4;margin: 0;margin-bottom: 30px;font-size: 35px;text-align: center;padding-top: 20px;">Julia</h1>
<h2 style="font-family: sans-serif;font-weight: 600;line-height: 1.4;margin: 0;margin-bottom: 30px;">Welcome to LIM!</h2>
<p style="text-align: center;font-family: sans-serif;font-size: 20px; font-weight:600;margin: 0;margin-bottom: 15px;">Thank you for joining our<br>community!</p>
<p style="text-align: center;font-family: sans-serif;font-size: 18px !important;font-weight: auto;margin: 0;margin-bottom: 15px;">Your account is almost ready - we<br>just need you to activate it now.</p>
<button id="rating-button" style="width: 230px;height: 50px;background-color: #673bad;border: 0;color: white;font-size: 20px;margin-top: 20px;margin-bottom: 30px;cursor: pointer;">Activate My Account</button>
<p style="text-align: center;font-family: sans-serif;font-size: 18px !important;font-weight: normal;margin: 0;margin-bottom: 1px;">The LIM Team</p><img height="80" src="https://marketing-image-production.s3.amazonaws.com/uploads/6566fddf8ebf7b7c661127a77eaec518602048eab969e8a395a5beeaa77bef50bdf708fc305de88a6435e983df52aa1acd0b5686b15cae8787f7d193701dce50.png" style="margin-top: 10px" width="80">
</td>
</tr>
</table>
</td>
</tr><!-- END MAIN CONTENT AREA -->
</table><!-- START FOOTER -->
<div class="footer" style="clear: both;margin-top: 10px;text-align: center;width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 100%;">
<tr>
<td></td>
</tr>
<tr>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;">
<table style="width: 100%;border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;"></td>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;">
<p style="text-align: center;color: #30265d;font-size: 12px;margin-top: 35px;font-family: sans-serif;font-weight: normal;margin: 0;margin-bottom: 15px;">© Language in Motion LLC - USA<br>
Schedule a lesson at limlessons.com<br>
Questions? · We’re hiring!</p>
</td>
</tr>
<tr>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;"></td>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;">
<hr noshade style="width: 340px;border-color: #d4d6d4;border-width: 1.5px;margin-bottom: 15px;margin-top: 30px;border: 0;border-bottom: 1px solid #f6f6f6;margin: 20px 0;">
</td>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;"></td>
</tr>
<tr>
<td style="font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;text-align: center;"></td>
<td style="width: 400px;margin: 0 auto;text-align: center;font-family: sans-serif;font-size: 14px;vertical-align: top;color: #999999;">
<p style="color: #30265d;font-size: 14px;display: inline;text-align: center;font-family: sans-serif;font-weight: normal;margin: 0;margin-bottom: 15px;">Join our community:</p><a href="#" style="display: inline;text-decoration: none;color: #30265d;font-size: 14px;text-align: center;"><img height="40" src="https://png.icons8.com/facebook/color/48" style="padding-top: 10px;border: none;-ms-interpolation-mode: bicubic;max-width: 100%; vertical-align:bottom;" title="Facebook" width="40"></a> <a href="#" style="display: inline;text-decoration: none;color: #30265d;font-size: 14px;text-align: center;"><img height="40" src="https://png.icons8.com/instagram/color/48" style="padding-top: 10px;border: none;-ms-interpolation-mode: bicubic;max-width: 100%; vertical-align:bottom;" title="Instagram" width="40"></a> <a href="#" style="display: inline;text-decoration: none;color: #30265d;font-size: 14px;text-align: center;"><img height="40" src="https://png.icons8.com/play-button/color/48" style="padding-top: 10px;border: none;-ms-interpolation-mode: bicubic;max-width: 100%; vertical-align:bottom;" title="Play Button" width="44"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table><!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
<table>
<tr>
<td style="font-family: sans-serif;font-size: 16px !important;vertical-align: top;"> </td>
</tr>
</table>
</body>
</html>