HTML Email Template Content Between Header/Footer Issue - html

I understand this is probably something really simple but I don't know anyone that can help me with my issue except the awesome Stack Overflow community. I have not worked with HTML/CSS to this extent for a while.
I am trying to create a new, better looking email template for my business. First I was having an issue with WHMCS where the global CSS styling wouldn't work. So to get around that I have been using inline CSS in the footer and header sections (see below):
The issue I am now having is the header and footer seem to be separated, and in the middle, where I want the email content, there is nothing but white space, even if I type text in there. I would like the middle content section to follow the styling above and below so it looks seamless and so that text can be typed in there.
Here is the code for both the header and footer (big space between two):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
</style>
</head>
<body>
<table data-module="header" class="email_table currentTable" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box;border-spacing: 0;mso-table-lspace: 0;mso-table-rspace: 0;width: 100%;min-width: 100%!important;">
<tr>
<td class="email_body email_start" data-bgcolor="Body" style="box-sizing: border-box;vertical-align: top;line-height: 100%;text-align: center;padding-left: 16px;padding-right: 16px;padding-top: 32px;background-color: #dde5ee;font-size: 0!important;">
<!--[if (mso)|(IE)]><table width="800" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:800px;Margin:0 auto;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="email_container" style="box-sizing: border-box;font-size: 0;display: inline-block;width: 100%;vertical-align: top;margin: 0 auto;text-align: center;line-height: inherit;max-width: 800px!important;">
<table class="content_section" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box;border-spacing: 0;mso-table-lspace: 0;mso-table-rspace: 0;width: 100%;min-width: 100%!important;">
<tr>
<td class="content_cell header_c brt pt pb" data-bgcolor="Content" data-border-top-color="Accent" style="box-sizing: border-box;vertical-align: top;font-size: 0;display: inline-block;width: 100%;text-align: center;background-color: #ffffff;border-top: 4px solid #2376dc;border-radius: 4px 4px 0 0;padding-top: 16px;padding-bottom: 16px;line-height: inherit;">
<!-- col-6 -->
<div class="email_row" style="box-sizing: border-box;font-size: 0;display: block;width: 100%;vertical-align: top;margin: 0 auto;text-align: center;clear: both;line-height: inherit;max-width: 600px!important;">
<!--[if (mso)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:600px;Margin:0 auto;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="col_6" style="box-sizing: border-box;font-size: 0;display: inline-block;width: 100%;vertical-align: top;max-width: 600px;line-height: inherit;">
<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box;border-spacing: 0;mso-table-lspace: 0;mso-table-rspace: 0;width: 100%;min-width: 100%!important;">
<tr>
<td class="column_cell px pt_xs pb_0 logo_c tc" data-color="Content" data-link-color="Accent" style="box-sizing: border-box;vertical-align: top;width: 100%;padding-top: 8px;padding-bottom: 0;font-family: Helvetica,Arial,sans-serif;font-size: 16px;line-height: 100%;color: #616161;mso-line-height-rule: exactly;text-align: center;padding-left: 16px;padding-right: 16px;min-width: 100%!important;">
<img src="https://hypeservers.com/wp-content/uploads/2016/10/Logomakr_0tDvse-2.png" width="110" height="24" alt="Hype Servers" style="max-width: 168px;outline: none;border: 0;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;line-height: 100%;height: auto!important;" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td valign="top" class="bodyContent" style="box-sizing: border-box;vertical-align: top;font-size: 0;display: inline-block;width: 100%;text-align: center;background-color: #ffffff;line-height: inherit;">
<p>'Hello'</p>
</td>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!-- </table> -->
<!-- </div> -->
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!-- </td> -->
<!-- </tr> -->
<!-- </table> -->
</table>
</div>
</td>
</tr>
</table>
<table data-module="footer_center" class="email_table" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; min-width: 100% !important;"><tr><td class="email_body email_end" data-bgcolor="Body" style="box-sizing: border-box; vertical-align: top; line-height: 100%; text-align: center; padding-left: 16px; padding-right: 16px; padding-bottom: 32px; font-size: 0 !important; background: #dde5ee;" align="center" bgcolor="#dde5ee" valign="top">
<!--[if (mso)|(IE)]>
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:800px;Margin:0 auto;">
<tbody>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="email_container" style="box-sizing: border-box; font-size: 0; display: inline-block; width: 100%; vertical-align: top; text-align: center; line-height: inherit; max-width: 800px !important; margin: 0 auto;" align="center">
<table class="content_section" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; min-width: 100% !important;"><tr><td class="content_cell footer_c py bt brb" data-bgcolor="Accent" data-border-top-color="Default" style="box-sizing: border-box; vertical-align: top; font-size: 0; display: inline-block; width: 100%; text-align: center; border-radius: 0 0 4px 4px; padding-top: 16px; padding-bottom: 16px; border-top-width: 1px; border-top-style: solid; border-top-color: #d7dbe0; line-height: inherit; background: #ffffff;" align="center" bgcolor="#ffffff" valign="top">
<!-- col-6 -->
<div class="email_row" style="box-sizing: border-box; font-size: 0; display: block; width: 100%; vertical-align: top; text-align: center; clear: both; line-height: inherit; max-width: 600px !important; margin: 0 auto;" align="center">
<!--[if (mso)|(IE)]>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:600px;Margin:0 auto;">
<tbody>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="col_6" style="box-sizing: border-box; font-size: 0; display: inline-block; width: 100%; vertical-align: top; max-width: 600px; line-height: inherit;">
<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; min-width: 100% !important;"><tr><td class="column_cell tc pb_0" data-color="Footer" data-link-color="Footer Link" style="box-sizing: border-box; vertical-align: top; width: 100%; padding-top: 16px; padding-bottom: 0; font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 23px; color: #999999; mso-line-height-rule: exactly; text-align: center; min-width: 100% !important;" align="center" valign="top">
<p class="fsocial" data-color="Footer" style="font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 100%; color: #999999; mso-line-height-rule: exactly; display: block; margin-top: 0; margin-bottom: 16px;">
<a href="#" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
</a>
   <a href="#" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
<img src="http://www.stampready.net/dashboard/editor/user_uploads/zip_uploads/2017/07/16/HZUKBlFvVrCsqQm6I51iRE7A/stampready_template/images/twitter_64_dark.png" width="24" height="24" alt="" style="max-width: 24px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; clear: both; line-height: 100%; height: auto !important; border: 0;" /></a>
   <a href="#" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
</a>
</p>
<p data-color="Footer" style="font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 23px; color: #999999; mso-line-height-rule: exactly; display: block; margin-top: 0; margin-bottom: 16px;">
©2017 Hype Servers<br />
3000 Fake Address Way, Fake Town 736278. </p>
<p data-color="Footer" style="font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 23px; color: #999999; mso-line-height-rule: exactly; display: block; margin-top: 0; margin-bottom: 16px;">
You are subscribed to Hype Servers Mailing List. <a href="#" data-color="Footer Link" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
<span data-color="Footer Link" style="text-decoration: underline; line-height: inherit; color: #999999;">
Unsubscribe</span>
</a>
</p>
</td>
</tr></table></div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</tbody>
</table>
<![endif]-->
</div>
</td>
</tr></table></div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</tbody>
</table>
<![endif]-->
</td>
</tr></table></body>
</html>


It seems to me that the body copy text is not visible to you because it's been styled with font-size:0px;
You can't rely on CSS to work in emails like it would on the web so make sure you do all your styling inline (as you have done).
I'm not familiar with WHMCS so forgive me if I've got the wrong end of the stick here.

Related

How to fix html width rendering problem in outlook

New HTML email template for this client seems to work fine elsewhere but on Outlook it gets displayed too wide or entire screen. I understand that in MSO width rules have to be forced through conditional, but none of my "if mso" would work and it continue to render too wide instead of honouring my 600px request. First time so more in general I'm not too positive that the code I've got down is clean and essential as it should be. Would very much appreciate your expert cross check and if you could point out wherever you see mistakes in it.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>{email_subject}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="x-apple-disable-message-reformatting">
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style type="text/css">
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body { margin: 0; padding: 0; height: 100%!important; width: 100%!important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly;}
table,td {
border-collapse: separate !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%!important; -ms-interpolation-mode: bicubic;}
img.aligncenter { display: block; margin: 0 auto;}
#media screen and (max-width: 525px) {
.pt-1, .padding-top-15 { padding-top: 15px!important; }
.pb-1, .padding-bottom-15 { padding-bottom: 15px!important; }
.responsive { width:100%!important; }
table.responsive { width:100%!important; float: none; display: table; padding-left: 0; padding-right: 0; }
table[class="responsive"] { width:100%!important; float: none; display: table; padding-left: 0; padding-right: 0; }
img { max-width: 100%!important }
img[class="responsive"] { max-width: 100%!important; }
/* "width: auto" restores the natural dimensions forced with attributes for Outlook */
.fluid { max-width: 100%!important; width: auto; }
img[class="fluid"] { max-width: 100%!important; width: auto; }
.block { display: block; }
td[class="responsive"]{width:100%!important; max-width: 100%!important; display: block; padding-left: 0 !important; padding-right: 0!important; float: none; }
td.responsive { width:100%!important; max-width: 100%!important; display: block; padding-left: 0 !important; padding-right: 0!important; float: none; }
td[class="section-padding-bottom-image"]{
padding: 50px 15px 0 15px !important;
}
.max-width-100 { max-width: 100%!important; }
/* Obsolete */
.tnp-grid-column {
max-width: 100%!important;
}
}
/* Text */
/* Html */
.html-td-global p {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
/* Last posts */
#media (max-width: 525px) {
.posts-1-column {
width: 100%!important;
}
.posts-1-image {
width: 100%!important;
display: block;
}
}
/* Gallery */
.gallery-medium {
box-sizing: border-box;
width: 280px;
height: 200px;
max-width: 100%!important;
overflow: hidden;
display: inline-block;
text-align: center;
padding: 0;
margin: 5px;
}
#media all and (max-width: 480px) {
.gallery-thumbnail-img {
max-width: 45%;
}
.gallery-medium {
max-width: 100%!important;
height: auto;
display: block;
margin-bottom: 10px;
}
}
/* A single full post */
#media all and (max-width: 480px) {
.single-post-gallery img {
max-width: 40%;
}
.single-post-1-column {
width: 100%!important;
}
.single-post-1-image {
width: 100%!important;
display: block;
}
}
/* List */
#media all and (max-width: 480px) {
.list-text .mobile {
font-size: 20px;
}
}
/* Columns */
#media only screen and (min-width:480px) {
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
}
#media only screen and (min-width:480px) {
.mj-column-per-33 {
width: 33.333333333333336% !important;
max-width: 33.333333333333336%;
}
}
#media only screen and (min-width:480px) {
.mj-column-per-25 {
width: 25% !important;
max-width: 25%;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; line-height: normal; word-spacing: normal;" dir="ltr">
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr>
<td bgcolor='#ffffff' valign='top'><!-- tnp --><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="image">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block">
<!--[if mso | IE]><!--[if mso]><table role=3D"presentation" align=3D"center" style=3D"width:600px;"><![endif]--> <table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MjAsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoyMCwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImh0bWwiOiJcdTAwM0NwIHN0eWxlPVwibWFyZ2luOiAwcHg7dGV4dC1hbGlnbjogcmlnaHRcIlx1MDAzRTI1IG5vdmVtYnJlMjAyMlx1MDAzQ1wvcFx1MDAzRSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoidGV4dCJ9" cellpadding="0" align="center" cellspacing="0" width="100%" style=" border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 15px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%"><tbody><tr><td align="center"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px"></td></tr></tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="text">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MjAsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoyMCwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImh0bWwiOiJcdTAwM0NwIHN0eWxlPVwibWFyZ2luOiAwcHg7dGV4dC1hbGlnbjogcmlnaHRcIlx1MDAzRTI1IG5vdmVtYnJlMjAyMlx1MDAzQ1wvcFx1MDAzRSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoidGV4dCJ9" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 0px; padding-left: 15px; padding-right: 15px; padding-bottom: 10px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%" style="width: 100%!important" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="100%" valign="top" align="left" style="font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: normal; color: #313131; line-height: 1.5;">
<p style="margin: 0px;padding-top:0px;padding-bottom: 10px; text-align: right">16 febbraio 2023</p> </td>
</tr>
</tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="cpt">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsImxhbmd1YWdlIjoiIiwicG9zdF90eXBlIjoicG9zdCIsIm1heCI6IjUiLCJpbWFnZSI6IjEiLCJkYXRlIjoiMSIsImF1dGhvciI6IjEiLCJ0aXRsZV9mb250X2ZhbWlseSI6IiIsInRpdGxlX2ZvbnRfc2l6ZSI6IiIsInRpdGxlX2ZvbnRfY29sb3IiOiIiLCJ0aXRsZV9mb250X3dlaWdodCI6IiIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImZvbnRfd2VpZ2h0IjoiIiwiYnV0dG9uX2xhYmVsIjoiQ09OVElOVUEiLCJidXR0b25fYmFja2dyb3VuZCI6IiIsImJ1dHRvbl9mb250X2NvbG9yIjoiIiwiYnV0dG9uX2ZvbnRfZmFtaWx5IjoiIiwiYnV0dG9uX2ZvbnRfc2l6ZSI6IiIsImJ1dHRvbl9mb250X3dlaWdodCI6IiIsInNob3dfcmVhZF9tb3JlX2J1dHRvbiI6IjEiLCJhdXRvbWF0ZWRfaW5jbHVkZSI6Im5ldyIsImF1dG9tYXRlZF9ub19jb250ZW50cyI6Ik5vIG5ldyBwb3N0cyBieSBub3chIiwiYXV0b21hdGVkIjoiIiwibGF5b3V0IjoiYmlnLWltYWdlIiwiaW5saW5lX2VkaXRzIjpbXSwiZXhjZXJwdF9sZW5ndGgiOiI2OCIsInRheF9jYXRlZ29yeSI6WyI0MyJdLCJ0YWdfcG9zdF90YWciOiIiLCJ0YWdfcG9zdF9mb3JtYXQiOiIiLCJibG9ja19pZCI6ImNwdCJ9" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<tbody><tr>
<td align="center">
<img src="https://ilborgodiparma.net/wp-content/uploads/2023/02/Monica_Cocconi_Borgo.jpeg" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding-top: 30px; border: 0; font-size: 12px" class=""> </td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
<tbody><tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
AUTONOMIA DIFFERENZIATA E PRINCIPI FONDAMENTALI di Monica Cocconi <hr style="width: 20%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
</tr>
<tr>
<td align="left" style="font-size: 16px;font-family: Open-sans, Geneva, sans-serif; font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9484" dir="ltr">
La recente proposta sull’attuazione dell’autonomia differenziata prevista dall’art. 116, comma terzo della Costituzione, ossia del riconoscimento alle regioni ordinarie di «ulteriori forme e condizioni ... </td>
</tr>
<tr>
<td align="right" inline-class="button">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 5px" align="right"><tbody><tr><td align="center" bgcolor="#ffff" role="presentation" style="border:1px solid #dd3333 !important; cursor:auto;mso-padding-alt:10px 25px; background:#ffff" valign="middle">CONTINUA</td></tr></tbody></table> </td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-top:25px"> <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<tbody><tr>
<td align="center">
<img src="https://ilborgodiparma.net/wp-content/uploads/2023/02/Veronica_valenti_parma.jpeg" width="570" height="297" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding-top: 30px; border: 0; font-size: 12px" class=""> </td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
<tbody><tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
LA TUTELA DEI DIRITTI DELLE PERSONE IN STATO DI DETENZIONE di Veronica Valenti <hr style="width: 25%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
</tr>
<tr>
<td align="left" style="font-size: 16px;font-family: Open-Sans, Geneva, sans-serif;font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9240" dir="ltr">
E’ davvero un onore per me ricoprire l’incarico di Garante comunale dei diritti delle persone private della libertà personale. E il fatto che il Comune di Parma abbia inteso istituire tale Ufficio dimostra la sensibilità della ... </td>
</tr>
<tr>
<td align="right" inline-class="button">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 5px" align="right"><tbody><tr><td align="center" bgcolor="#fff" role="presentation" style="border:1px solid #dd3333; cursor:auto;mso-padding-alt:10px 25px;background:#fff" valign="middle">CONTINUA</td></tr></tbody></table> </td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-top:25px"> <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<center><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/Oltrelemura_Newsletter.png" width="" alt="" border="0" style="display: block; max-width: 400px !important; width: 400px !important; padding: 0; border: 0; font-size: 12px"></center>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px">
<tbody><tr>
<td align="center">
<img src="https://ilborgodiparma.net/wp-content/uploads/2022/10/Oltrelemura_web-e1667502181350-1170x535.jpeg" alt="" border="0" style="display: inline-block; max-width: 100%!important; padding: 0; border: 0; font-size: 12px" class=""> </td>
</tr>
</tbody></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="responsive" style="margin: 0;">
<tbody><tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td align="left" style="font-size: 20px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;color: #222222; line-height: normal !important; padding: 0 0 0px 0;" class="title tnpc-row-edit tnpc-inline-editable" data-type="title" data-id="156" dir="ltr">
OLTRELEMURA del 02.02.2023 a cura di Graziano Vallisneri <hr style="width: 25%" noshade="noshade" color="#dd3333" align="left" size="1px"></td>
</tr>
<tr>
<td align="left" style="font-size: 16px;font-family: Open-Sans, Geneva, sans-serif;font-weight: normal;color: #313131; line-height: 1.5em!important; padding: 10px 0 15px 0;" class="tnpc-row-edit tnpc-inline-editable" data-type="text" data-id="9194" dir="ltr">
</td>
</tr>
<tr>
<td align="right" inline-class="button">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 5px auto 0px" align="right"><tbody><tr><td align="center" bgcolor="#fff" role="presentation" style="border:1px solid #dd3333; cursor:auto;mso-padding-alt:10px 25px;background:#fff" valign="middle">CONTINUA</td></tr></tbody></table> </td>
</tr>
<td style="padding-top:25px"> <hr align="left" noshade="noshade" color="#dd3333" size="1px"> </td>
</tbody></table>
</tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="image">
<tb0;" class="edit-block"><!--[if mso | IE]><table ="0" cellpadding="0" align="center" cellspacing="0" width="600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MCwiYmxvY2tfcGFkZGluZ19sZWZ0IjowLCJibG9ja19iYWNrZ3JvdW5kIjoiIiwiYmxvY2tfYmFja2dyb3VuZF8yIjoiIiwiYmxvY2tfd2lkdGgiOjYwMCwiYmxvY2tfYWxpZ24iOiJjZW50ZXIiLCJpbWFnZSI6eyJpZCI6IjE1MzM0IiwidXJsIjoiaHR0cDpcL1wvcHJvdmFib3Jnby5pdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTFcL2ZhY2Vib29rLW5ld2xldHRlci5qcGcifSwiaW1hZ2UtYWx0IjoiIiwidXJsIjoiIiwid2lkdGgiOiIxMDAiLCJhbGlnbiI6ImNlbnRlciIsImlubGluZV9lZGl0cyI6IiIsInBsYWNlaG9sZGVyIjoiIiwiaW1hZ2UtdXJsIjoiaHR0cDpcL1wvcHJvdmFib3Jnby5pdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTFcL2ZhY2Vib29rLW5ld2xldHRlci5qcGciLCJibG9ja19pZCI6ImltYWdlIn0=" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><table width="100%"><tbody><tr><td align="center"><img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/seguici-anche-su-facebook.jpg" width="100" height="43" alt="" border="0" style="display: block; max-width: 200px !important; width: 100%; padding: 0; border: 0; font-size: 12px"></td></tr></tbody></table></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="border-collapse: collapse; width: 100%;" class="tnpc-row tnpc-row-block ui-sortable-handle" data-id="footer">
<tbody><tr><td align="center" style="padding: 0;" class="edit-block"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" align="center" cellspacing="0" width="margin-top: 0; 600"><tr><td width="600" style="vertical-align:top;width:600px;"><![endif]--><table type="options" data-json="eyJibG9ja19wYWRkaW5nX3RvcCI6MTUsImJsb2NrX3BhZGRpbmdfYm90dG9tIjoxNSwiYmxvY2tfcGFkZGluZ19yaWdodCI6MTUsImJsb2NrX3BhZGRpbmdfbGVmdCI6MTUsImJsb2NrX2JhY2tncm91bmQiOiIiLCJibG9ja19iYWNrZ3JvdW5kXzIiOiIiLCJibG9ja193aWR0aCI6NjAwLCJibG9ja19hbGlnbiI6ImNlbnRlciIsInZpZXciOiJHdWFyZGEgb25saW5lIiwidmlld19lbmFibGVkIjoiMSIsInByb2ZpbGUiOiJHZXN0aXNjaSBpIHR1b2kgYWJib25hbWVudGkiLCJwcm9maWxlX2VuYWJsZWQiOiIxIiwidW5zdWJzY3JpYmUiOiJEaXNpc2NyaXZpdGkiLCJ1bnN1YnNjcmliZV9lbmFibGVkIjoiMSIsImZvbnRfZmFtaWx5IjoiIiwiZm9udF9zaXplIjoiIiwiZm9udF9jb2xvciI6IiIsImZvbnRfd2VpZ2h0IjoiIiwidXJsIjoicHJvZmlsZSIsImlubGluZV9lZGl0cyI6IiIsImJsb2NrX2lkIjoiZm9vdGVyIn0=" class="tnpc-block-content" border="0" cellpadding="0" align="center" cellspacing="0" width="100%" style="border-left: 1px #C0C0C0 solid; border-right: 1px #C0C0C0 solid; width: 100%!important; max-width: 600px!important">
<tbody><tr><td align="center" style="text-align: center; width: 100% !important; line-height: normal !important; letter-spacing: normal; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px; background-color: #ffffff;" bgcolor="#ffffff" width="100%"><a style="font-size: 11px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #dd3333; text-decoration: none; line-height: normal;" href="https://ilborgodiparma.net/contatti?utm_source=BorgoNews&utm_medium=email&utm_campaign=BN_160223&utm_content=contatti_link" target="_blank">Circolo Il Borgo di Parma - Via A. Turchi 15A Parma 43125 - Telefono: 0521284203</a><br><span style="font-size: 10px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;">Per aggiornare o cancellare la tua iscrizione</span><a style="font-size: 10px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;" href="{profile_url}" target="_blank"> clicca qui.</a><br><br><a style="font-size: 11px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;color: #222222; text-decoration: none; line-height: normal;" href="https://www.p40.us/" target="_blank">Progetto e realizzazione</a><a style="font-size: 11px;font-family:'trebuchet ms', Geneva, sans-serif;font-weight: 700; color: #222222; text-decoration: none; line-height: normal;" href="https://www.p40.us/" target="_blank"> P40.</a></td></tr></tbody></table><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table>
<!-- /tnp -->
</body>
</html>

Outlook desktop does this when you do not specify a width attribute in images (width="x"). It will then use the native width of the image, which of course could be 1000px+.
Ensure you add the correct width attribute to all your images that you want Outlook to use. Continue to use style="width:xx" for everything else (this will take priority on everything except for Outlook, which ignores it completely).
e.g. change this:
<img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px">
Into this:
<img src="https://ilborgodiparma.net/wp-content/uploads/2022/12/BorgoNews_header_2023-e1671190356968.jpg" width="500" alt="" border="0" style="display: block; max-width: px !important; width: 100%; padding: 0; border: 0; font-size: 12px">
Do not use "px" or other measurement in a width attribute. It should be just a number.

html email template table header alignment

I have to float two header alignment left and right, the logo will be float left and navigation will be right but vertically center
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
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;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
#media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<table align="left">
<tr class="gf-e-header">
<td class="gf-e-header">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
</td>
<td valign="middle" align="right">
Company
Services
Locations
Resources
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to example#gmail.com <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>
And the responsive links will go down after the logo.

Your header is currently not taking up the full width of the email, so first add width:100%; to this element. Next, just add either text-align:right; or just align="right" to the navigation section. See below:
<table align="left" style="width: 100%;">
<tbody>
<tr class="gf-e-header">
<td class="gf-e-header">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130">
</a>
</td>
<td style="text-align: right;">
Company
Services
Locations
Resources
</td>
</tr>
</tbody>
</table>
JSFiddle

First of all you have pretty messed up code , I have filtered some. I fixed your issue using display:grid; to header logo and nav container and giving them both 1fr , so they can take space evenly ,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
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;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
#media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.header-top{
display:grid;
grid-template-columns:1fr 1fr;
place-items:center;
padding: 30px;
}
.header-top .logo{
justify-self:left;
}
.header-top .nav{
text-align:right;
display:flex;
flex-direction:row;
justify-content: right;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900"
id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="background-color: #eeeeee;">
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td>
<div class="header-top">
<a class="logo" href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
<div class="nav">
Company
Services
Locations
Resources
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to
navigate overview of what will happen with your personal data when you visit our
website. The term „personal data“ comprises all data that can be used to personally
identify you.
For detailed information about the subject matter of data protection, please consult
our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this
website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span
style="font-size: 15px; color:#454545">The data on this website is processed by the
operator of the website, whose contact
information is available under section „Information Required by Law“ on this
website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp"
style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px"
href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px "
href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to example#gmail.com <br /> ©
2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br clear="all" />
</body>
</html>

You used a table inside a td tag. So when u align the list items right , it's not working. I updated that part pls go through and update it in your code.. Happy Coding!!! I just put the list items inside another div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
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;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
#media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
<div style="float:right;">
Company
Services
Locations
Resources
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to example#gmail.com <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>

You can change valign="middle" attributes to align="center" and add height="70px" to the navigation table. There are better options, but I think it does what you want it to do.
<table align="right" width="70%" height="70px">
<tbody>
<tr align="center">
<td>
Company
Services
Locations
Resources
</td>
</tr>
</tbody>
</table>

How to make a table stack on mobile?

Working on a newsletter template, and I'm trying to get a table of three ads (and a gap in between) to display one beneath the other on mobile, while displaying as a row on desktop (which is behaving as expected right now).
I've looked at Media Queries and classes to see what I can do including display: block and so forth, but haven't come up with anything that works in testing.
Here's the table that is housing these images:
<!-- begin snippet: js hide: false console: true babel: false -->
<table idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};"
bgcolor="${freeTextBackgroundColor}" valign="top">
<center>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"
align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer};"
height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Lato', Arial, sans-serif;font-size: 14px;line-height: 23px;color: #666666;border-collapse: collapse;">
<div>
<table>
<tbody>
<tr>
<td align="center" valign="top" width="300" style="width: 300px;"> <img src="<IMG SRC FOR BLOCK 1>" /> </td>
<td align="center" valign="top" width="50" style="width: 50px;"></td>
<td align="center" valign="top" width="300" style="width: 300px;"> <img src="<IMG SRC FOR BLOCK 1>" /> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};"
height="${freeTextSpacer2}"> </td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Desktop View (Works):
Mobile View (Problem):
I need to keep the Desktop as is, but make the two blocks on mobile appear one underneath the other.

/* Prevent WebKit and Windows mobile changing default text sizes */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
/* 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;}
table, td { border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt !important;}
/* remove the download icon from gmail*/
img + div { display:none; }
/* 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 only screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
/* ADJUST BUTTONS ON MOBILE */
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
/* FULL WIDTH IMAGE */
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* EVENT SECTION BUTTON */
.button-padding {
padding-left: 30px;
padding-right: 30px;
}
.mobile-center {
text-align: center !important;
}
.remove-float {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}
.normal-padding {
padding-top: 20px !important;
}
table[class="body"] .content--wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
}
table[class="body"] .responsive-table {
float: none !important;
width: 100% !important;
clear: both;
}
.center-responsive{
text-align: -webkit-center;
}
}
#media screen and (max-width: 599px) {
.container {
width: 100%!important;
}
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
.mobile-center {
width: 100% !important;
text-align: center !important;
}
.remove-float {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}
.col-2 {
max-width: 100% !important;
width: 100% !important;
}
.col-3 {
max-width: 100% !important;
width: 100% !important;
}
.pi-col-wrapper {
display: block;
width: 100%!important;
}
.pi-col {
width: 100%;
}
.center-responsive{
text-align: -webkit-center;
}
}
#media screen and (min-width: 600px) {
.container {
width: 600px!important;
margin: 0 auto!important;
}
.mobile-center {
width: 100% !important;
}
.col-2 {
display: inline-block !important;
width: 262px !important;
}
.col-3 {
display: inline-block !important;
width: 185px !important;
}
.fluid-wrapper {
width: 540px !important;
}
.pi-col-wrapper {
display: inline-block;
width: 50%!important;
}
.pi-col {
width: 255px !important;
}
.center-responsive{
text-align: -webkit-right;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Janssen</title>
<!--[if gte mso 9]>
<style>
sup { font-size: 100% !important; }
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: #f4f4f4; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f4f4f4" style="width:100% !important;">
<tbody>
<tr>
<td align="center" valign="top">
<table class="container" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
<tbody>
<!-- ========== INTRO TEXT WITH SIGNATURE STARTS ========== -->
<tr>
<td class="content--wrapper" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding: 15px 30px 37px; text-align: left; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%; width: 100% !important;">
<tbody>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 0;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="540" style="padding: 0;" class="responsive-table">
<tbody>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="padding-bottom: 20px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="center" valign="top" width="540">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:540;">
<tbody>
<tr>
<td align="left" valign="top" style="font-size:0;" bgcolor="#f7f7f7">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="left" valign="top" width="268">
<![endif]-->
<div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="168" class="wrapper">
<tbody>
<tr>
<td valign="top">
<img src="https://dummyimage.com/262x170/000/fff.png" alt="alt text here" width="262" height="170" border="0" style="display: block; font-family: Arial; color: #266e9c; font-size: 14px;" class="wrapper">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="268">
<![endif]-->
<div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" bgcolor="#f7f7f7" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 268px; float: right;" class="wrapper">
<tbody>
<tr>
<td style="padding: 15px;padding-top: 27px" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" style="font-size: 13px; line-height: 20px; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; text-decoration: none;" class="padding-copy">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: normal; line-height: 20px; padding-bottom: 9px;padding-top: 16px;" class="">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="border-radius: 5px; padding:9px 14px 9px 14px;" bgcolor="#002060">
READ MORE >
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- ========== LEFT RIGHT TWO COLUMN WITH THUMBNAIL ENDS ========== -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have tested on outlook and also checked the orientation issue on iPhone. It's working perfectly on devices. Just put the contents and adjust accordingly. Hope it'll help

Newsletter email - can't find what's wrong with my code. No errors in Dreamweaver either

When I preview this the content table explodes outside of 700 pixels. I'm sure it is something simple like a missing tag but I checked for an hour and made some changes but still the problem persists. The Dreamweaver program didn't show any errors either.
Thanks in advance for any help.
After using the inline tool, this is the new code. The same problem still exists. It looks like a padding issue but I'm not sure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ezTaxReturn.com Newsletter</title>
<!-- Targeting Windows Mobile --><!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]--><!-- ***********************************************
****************************************************
END MOBILE TARGETING
****************************************************
************************************************ --><!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; width: 100% !important">
<style type="text/css">
body {
width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
#backgroundTable {
margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;
}
h1 a:active {
color: red !important;
}
h2 a:active {
color: red !important;
}
h3 a:active {
color: red !important;
}
h4 a:active {
color: red !important;
}
h5 a:active {
color: red !important;
}
h6 a:active {
color: red !important;
}
h1 a:visited {
color: purple !important;
}
h2 a:visited {
color: purple !important;
}
h3 a:visited {
color: purple !important;
}
h4 a:visited {
color: purple !important;
}
h5 a:visited {
color: purple !important;
}
h6 a:visited {
color: purple !important;
}
#media only screen and (max-device-width: 480px) {
a[href^="tel"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
a[href^="sms"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
.mobile_link a[href^="tel"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
.mobile_link a[href^="sms"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
#navigation {
display: none;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
a[href^="sms"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
.mobile_link a[href^="tel"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
.mobile_link a[href^="sms"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
}
</style>
<table class="newsletter-table" id="backgroundTable" style="background: #ebebeb; border-collapse: collapse; line-height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb"><tbody><tr><td valign="top" style="border-collapse: collapse">
<!-- PRE -->
<table class="pre" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt"><tbody><tr>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 10px; line-height: 14px; padding: 20px 0 0" align="center">The September 2015 customer newsletter is sent as a courtesy from ezTaxReturn.com.<br>View Online in Browser. If you prefer not to receive email from us, click here to unsubscribe.<br><br>
</td>
</tr></tbody></table>
<!-- END PRE --><!-- HEADER START --><table class="hero" style="border-collapse: collapse; font-family: Arial,Helvetica; font-size: 12px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 700px" border="0" cellpadding="0" cellspacing="0" align="center"><tbody align="center">
<tr>
<td data-description="Orange Bar" style="background: #fb7016; border-collapse: collapse; line-height: 0px" colspan="2" align="center" bgcolor="#fb7016"><img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/orange-5x5.gif" height="5" width="5" alt="line"></td>
</tr>
<tr>
<td style="background: #ffffff; border-collapse: collapse" width="350" bgcolor="#ffffff"><img alt="ezTaxReturn.com - The fastest way to get the biggest fund." src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/ezTaxReturnLogo.jpg" width="100%" style="border: none"></td>
<td style="background: #ffffff; border-collapse: collapse" bgcolor="#ffffff">
<font style="color: #fb7016">SEPTEMBER NEWSLETTER</font>
</td>
</tr>
</tbody></table>
<table id="Table_01" width="700" height="367" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td colspan="2" style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_012.jpg" width="700" height="280" border="0" alt="Still haven't filed your taxes? No problem." style="border: none"></a>
</td>
</tr>
<tr>
<td style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/offers_plan.html" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_022.jpg" width="351" height="88" border="0" alt="Save time and money. Pre-register for next year." style="border: none"></a>
</td>
<td style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/post_comments.html" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_032.jpg" width="350" height="88" border="0" alt="We care. Share your filing experience." style="border: none"></a>
</td>
</tr>
</table>
</td></tr></tbody></table>
<!-- HERO END --><!-- CONTENT --><table cellpadding="0" cellspacing="0" border="0" align="center" style="background: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="700px" bgcolor="#ffffff">
<tr>
<td valign="top" style="border-collapse: collapse">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="385">
<tr><td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 20px 0px 0px 40px" valign="top">TAX TALK, NEWS & INSIGHTS</td></tr>
<tr>
<td valign="top" style="border-collapse: collapse; color: #000; font-family: Arial, Helvetica; font-size: 12px; padding: 25px 20px 20px 40px">
Review your taxes now to prevent<br>a surprise next spring<br>
Don’t let tax time fool you. Some people are overjoyed<br>to receive a big refund at tax time...
[READ MORE]<br><br>Furthering your education<br>has tax benefits<br>
Enjoy the rest of your summer while you can, school will<br>be back in session before you know it... [READ MORE]
<br><br>6 tips to exercise safely in the summer heat<br>
Summer’s the perfect time to get off the couch and<br>engage in outdoor activities... [READ MORE]
<br><br>Easy ways to keep your home safe<br>while you travel<br>
Imagine returning from the vacation of a lifetime to find<br>your home ransacked... [READ MORE]
<br><br>Did you file a tax extension?<br>The clock is ticking...<br>
April 15th has come and gone but the tax season hasn’t ended for nearly 13 million people... [READ MORE]
<br>
</td>
</tr>
<tr><td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding-left: 40px" valign="top">TESTIMONIALS</td></tr>
<tr>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding: 15px 0px 0px 40px">
<b>Therese P., AL</b>
</td>
</tr>
<tr>
<td colspan="2" style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-left: 40px">
I just used your wonderful site to file. Thank you, thank<br>you! Highly recommend you to all!!! I will definitely be<br>back next year! I'm so glad I found you. This was my<br>first time doing my own taxes. Thanks again for your<br>quick and helpful responses.
<br>[READ MORE TESTIMONIALS]
<p style="margin: 1em 0"></p>
<p style="margin: 1em 0"></p>
<p style="margin: 1em 0"></p>
</td>
</tr>
<tr>
<td style="border-collapse: collapse; padding: 2px 40px 20px 0px">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/like-facebook.gif" alt="Follow us on Facebook" align="right" border="0" style="border: none">
</td>
</tr>
</table>
</td>
<td valign="top" style="border-collapse: collapse">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; border-left-color: #ccc; border-left-style: solid; border-left-width: 0px; font-family: Arial, Helvetica; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="300">
<tr>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 20px 0px 0px" valign="top">
EZ LAUGHS
</td>
</tr>
<tr>
<td style="border-collapse: collapse">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/jan2014_cartoon.gif" alt="Tax Humor" title="Tax Humor" width="290" height="288" border="0" style="padding: 40px 0px 54px">
</td>
</tr>
</table>
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 0px 20px 0px 0px; valign: top; width: 130px">
TAX TOOLS
</td>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 0px 20px 0px 0px; valign: top">
BLOG
</td>
</tr>
<tr>
<td style="border-collapse: collapse; font-size: 12px; padding-top: 20px">
Start a Return<br>Download a Return<br>What's my ezStatus<br>Where's my Refund?
</td>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-top: 20px">
Read more<br>
from our blog.<br><br>blog.eztaxreturn.com<br>
</td>
</tr>
<tr><td colspan="2" style="border-collapse: collapse; padding: 93px 0px 0px">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/follow-twitter.gif" alt="Follow us on Twitter" border="0" align="left" style="border: none">
</td></tr>
</table>
</td>
</tr>
<!-- END CONTENT --><!-- FOOTER --><tr>
<td style="border-collapse: collapse">
<table class="post" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 11px; line-height: 16px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="700"><tr>
<td style="border-collapse: collapse; color: #666666; padding: 25px 0" align="center">This email was sent to {{{email_address}}}.<br>Click Here To Unsubscribe<br> Copyright 2015 ezTaxReturn.com, LLC | 100 Ring Road West | Garden City, NY 11530<br> All rights reserved.</td>
</tr></table>
</td>
</tr>
<!-- END FOOTER --><!-- End of wrapper table -->
</table>
</body>
</html>

There were multiple problems with table layout and, generally, nesting. Also, "px" in HTML width attributes. Here's a patched up version which at least shows up fine in Chrome. It's a good starting point to further clean up the code. I am not going to render-test it further because this is a site for questions and the question was why is the code "exploding". Well, the code below doesn't "explode" anymore (at least in latest Chrome):
JSFiddle

CSS in your <head> will often be ignored by email clients that render HTML emails.
The safe bet is to apply CSS using style= attributes on each tag. Fortunately, you can take what you have now and use a free online service to create your final HTML. There are several other options to apply the CSS to each HTML element.

Rails HTML Email Displays HTML code

I'm working on an html welcome email to new users, but it's not working. When I send it, it's displaying the html code as text, as opposed to rendering the actual html. I made the html of my template starting with a template from Mailchimp, so I'm surprised it doesn't work. Also, when I send the email using Putsmail.com and emailonacid.com, it looks fine.
However, in production, the email sends and the html appears as text in the email, like so (from registration_confirmation.html.erb):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="width: 100% !important; -webkit-text-size-adjust: none !important; background-color: #ffa500 !important; margin: 0; padding: 0;" bgcolor="#ffa500">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="height: 100% !important; width: 100% !important; margin: 0; padding: 0;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader" style="background-color: #ffa500;" bgcolor="#ffa500">
<tr>
<td valign="top" class="preheaderContent">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_preheader_content" style="color: #505050; font-family: Arial; font-size: 10px; line-height: 100%; text-align: left;" align="left">
</div>
</td>
<td valign="top" width="180">
<div mc:edit="std_preheader_links" style="color: #505050; font-family: Arial; font-size: 10px; line-height: 100%; text-align: left;" align="left">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" style="background-color: #ffffff; border: 1px solid #dddddd;" bgcolor="#ffffff">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top" class="bodyContent" style="background-color: #ffffff;" bgcolor="#ffffff">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>
<a href="http://foobar.com">
<img src="https://s3.amazonaws.com/images/email_logo.gif" style="float:right;" alt="logo" />
</a>
</td>
</tr>
<tr>
<td valign="top">
<div mc:edit="std_content00" style="color: #505050; font-family: Arial; font-size: 14px; line-height: 150%; text-align: left;" align="left">
<span class="h2" style="color: #202020; display: block; font-family: Arial; font-size: 22px; font-weight: bold; line-height: 100%; margin-bottom: 10px; text-align: left;">Welcome to <%= user.name %>!</span>
Thanks for registering!<br /><br />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter" style="background-color: #FDFDFD; border-top-width: 0;" bgcolor="#FDFDFD">
<tr>
<td valign="top" class="footerContent"></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
<style type="text/css">
body { width: 100% !important; }
body { -webkit-text-size-adjust: none !important; }
body { margin: 0 !important; padding: 0 !important; }
img { border: none !important; font-size: 14px !important; font-weight: bold
!important; height: auto !important; line-height: 100% !important; outline: none
!important; text-decoration: none !important; text-transform: capitalize !important; }
#backgroundTable { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
body { background-color: #FAFAFA !important; }
.preheaderContent div a:visited { color: #336699 !important; font-weight: normal
!important; text-decoration: underline !important; }
.headerContent a:visited { color: #336699 !important; font-weight: normal
!important; text-decoration: underline !important; }
.bodyContent div a:visited { color: #336699 !important; font-weight: normal
!important; text-decoration: underline !important; }
.footerContent div a:visited { color: #336699 !important; font-weight: normal
!important; text-decoration: underline !important; }
body { background-color: #ffa500 !important; }
</style>
My mailer:
def registration_confirmation(user)
#user = user
subject "Welcome #{#user.first_name}!"
from "info#foobar.com"
recipients #user.email
sent_on Time.now
end
Called from the user registration model:
Notifier.registration_confirmation(user).deliver

You appear to be missing the content-type:
def registration_confirmation(user)
#user = user
subject "Welcome #{#user.first_name}!"
from "info#foobar.com"
recipients #user.email
sent_on Time.now
# Set content-type header
content_type "text/html"
end
It defaults to text/plain, so you must explicitly set it for an HTML or multipart message.