title: HTML responsive email width issue in Outlook
body: <p>I'm creating a responsive email template based off of <a href="http://zurb.com/playground/projects/responsive-email-templates/basic.html" rel="nofollow">this</a>. </p>
  
  <p>I've got it working how I want it in Gmail, Yahoo, Outlook.com etc. and most phones but I can't work out why Outlook on desktop doesn't like it. I want the width of the email not to stretch further than 662px.</p>
  
  <p>Screenshots:</p>
  
  <p><a href="http://i.imgur.com/RUJC8dT.png" rel="nofollow">Outlook</a><br />
  <a href="http://i.imgur.com/0xv1mlf.png" rel="nofollow">Apple Mail</a> (how I want it to look)</p>
  
  <p>Here's the code, I'm using <a href="http://beaker.mailchimp.com/inline-css" rel="nofollow">MailChimps CSS inliner tool</a> before I send tests every time.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;!-- If you delete this tag, the sky will fall on your head --&gt;
  &lt;meta name="viewport" content="width=device-width" /&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;XXX&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  /* ------------------------------------- 
          GLOBAL 
  ------------------------------------- */
  * { 
      margin:0;
      padding:0;
  }
  * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
  
  img { 
      max-width: 100%; 
  }
  .collapse {
      margin:0;
      padding:0;
  }
  body {
      -webkit-font-smoothing:antialiased; 
      -webkit-text-size-adjust:none; 
      width: 100%!important; 
      height: 100%;
  }
  
  
  /* ------------------------------------- 
          ELEMENTS 
  ------------------------------------- */
  a { color: #2BA6CB;}
  
  p.callout {
      padding:15px;
      background-color:#ECF8FF;
      margin-bottom: 15px;
  }
  .callout a {
      font-weight:bold;
      color: #2BA6CB;
  }
  
  table.social {
  /*  padding:15px; */
      background-color: #ebebeb;
  
  }
  
  /* ------------------------------------- 
          HEADER 
  ------------------------------------- */
  table.head-wrap { width: 100%;}
  
  .header.container table td.logo { padding: 15px; }
  .header.container table td.label { padding: 15px; padding-left:0px;}
  
  
  /* ------------------------------------- 
          BODY 
  ------------------------------------- */
  table.body-wrap { width: 100%;}
  
  
  /* ------------------------------------- 
          FOOTER 
  ------------------------------------- */
  table.footer-wrap { width: 100%;    clear:both!important;
  }
  .footer-wrap .container td.content  p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
  .footer-wrap .container td.content p {
      font-size:10px;
      font-weight: bold;
  
  }
  
  
  /* ------------------------------------- 
          TYPOGRAPHY 
  ------------------------------------- */
  h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
  }
  
  h3 { font-weight:500; font-size: 60px; color:red;}
  
  .collapse { margin:0!important;}
  
  p, ul { 
      margin-bottom: 10px; 
      font-weight: bold; 
      font-size:14px; 
      line-height:1.6;
      color: #5B6063;
  }
  
  
  /* --------------------------------------------------- 
          RESPONSIVENESS
          Nuke it from orbit. It's the only way to be sure. 
  ------------------------------------------------------ */
  
  /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
  .container {
      display:block!important;
      max-width:662px!important;
      margin:0 auto!important; /* makes it centered */
      clear:both!important;
  }
  
  /* This should also be a block element, so that it will fill 100% of the .container */
  .content {
      padding:15px;
      max-width:662px;
      margin:0 auto;
      display:block; 
  }
  
  .mainBg {
      background-color: #CCCCCC;
      background-image: url('http://placehold.it/643x638');
      /*background-image: url('XXX_BG_2.jpg');
      background-size: 100%;*/
      background-repeat: repeat-x;
  }
  
  .mainOverlay {
      width: 375px;
      margin:0 auto;
      background-color: #FFFFFF;
      border-style: solid;
      border-width: 1px;
      border-color: #cccccc;
  }
  
  .overlayText {
      width: 240px;
      margin: 0 auto;
  }
  
  
  /* Let's make sure tables in the content area are 100% wide */
  .content table { width: 100%; }
  
  
  /* Odds and ends */
  .column {
      width: 300px;
      float:left;
  }
  .column tr td { padding: 15px; }
  .column-wrap { 
      padding:0!important; 
      margin:0 auto; 
      max-width:662px!important;
  }
  .column table { width:100%;}
  
  /* Be sure to place a .clear element after each set of columns, just to be safe */
  .clear { display: block; clear: both; }
  
  /* ------------------------------------------- 
          PHONE
          For clients that support media queries.
          Nothing fancy. 
  -------------------------------------------- */
  @media only screen and (max-width: 662px) {
  
      a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
  
      div[class="column"] { width: auto!important; float:none!important;}
  
      table.social div[class="column"] {
          width:auto!important;
      }
  
      p, ul { 
          margin-bottom: 10px!important; 
          font-weight: normal!important; 
          font-size:11px!important; 
          line-height:1.6!important;
      }
  
      .mainOverlay {
          max-width: 220px!important;
          margin:0 auto!important;
          background-color: #FFFFFF!important;
          border-style: solid!important;
          border-width: 1px!important;
          border-color: #cccccc!important;
      }
  
  
      .overlayText {
          width: 170px!important;
          margin:0 auto!important;
      }
  
      h3 { 
          font-weight:500!important; 
          font-size: 27px!important; 
          color:red!important;
      }
  
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body bgcolor="#FFFFFF"&gt;
  
  &lt;!-- HEADER --&gt;
  &lt;table class="head-wrap" bgcolor="#FFFFFF"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="header container"&gt;
  
                  &lt;div class="content"&gt;
                      &lt;table bgcolor="#FFFFFF"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/240x40" /&gt;&lt;/a&gt;
                                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/69x18" /&gt;&lt;/a&gt;
                                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/94x18" /&gt;&lt;/a&gt;
                                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/73x18" /&gt;&lt;/a&gt;
                                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/86x18" /&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td class="header container"&gt;
  
                  &lt;div class="content"&gt;
                      &lt;table bgcolor="#FFFFFF"&gt;
                      &lt;tr&gt;
                          &lt;td align="center" style="border-top: solid #cccccc 1px; border-bottom: solid #cccccc 1px; font-size:11px;"&gt;&lt;span style="color: rgb(44,147,221)"&gt;FREE SHIPPING&lt;/span&gt; ON ORDERS OVER XXX&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- /HEADER --&gt;
  
  
  &lt;!-- BODY --&gt;
  &lt;table class="body-wrap"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="container" bgcolor="#FFFFFF"&gt;
  
              &lt;div class="content"&gt;
                  &lt;div class="mainBg"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td align="center"&gt;
                                  &lt;br /&gt;
                                  &lt;h3 align="center"&gt;JOYEUX ANNIVERSAIRE!&lt;/h3&gt;
                                          Dear XXXX,
                                          &lt;br /&gt;&lt;br /&gt;
                                                  &lt;span style="font-weight:bold;"&gt;Happy Birthday from XXX!&lt;/span&gt;
                                                  &lt;br /&gt;&lt;br /&gt;
                                                  To celebrate your special day, 
                                                  we’re giving you &lt;span style="color: red"&gt;$XX&lt;/span&gt; to spend 
                                                  at our online store.
                                                  &lt;br /&gt;&lt;br /&gt;
                                                  Simply enter the code 
                                                  &lt;span style="color: red"&gt;XXX&lt;/span&gt; at checkout.
                                                  &lt;br /&gt;&lt;br /&gt;
                                                  Your offer is valid for the next XX days. 
                                                  Enjoy!
                                                  &lt;br /&gt;&lt;br /&gt;
                                                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/203x38" /&gt;&lt;/a&gt;
                                                  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
                                  &lt;span class="clear"&gt;&lt;/span&gt; 
  
  
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- /BODY --&gt;
  
  &lt;!-- FOOTER --&gt;
  &lt;table class="footer-wrap"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="container"&gt;
  
                  &lt;div class="content"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td align="center"&gt;
                                  &lt;p&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/125x16" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/21x37" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/23x37" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/21x37" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/22x37" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/22x37" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/22x37" /&gt;&lt;/a&gt;
                                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/110x37" /&gt;&lt;/a&gt;
                                  &lt;/p&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- /FOOTER --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Inlined:</p>
  
  <p>
      
      
      
      </p>
  
  <pre><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
  &lt;title style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;XXX&lt;/title&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body bgcolor="#FFFFFF" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;width: 100%;"&gt;
  
  &lt;!-- HEADER --&gt;
  &lt;table class="head-wrap" bgcolor="#FFFFFF" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;"&gt;
      &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
          &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;/td&gt;
          &lt;td class="header container" style="margin: 0 auto;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;display: block;max-width: 662px;clear: both;"&gt;
  
                  &lt;div class="content" style="margin: 0 auto;padding: 15px;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 662px;display: block;"&gt;
                      &lt;table bgcolor="#FFFFFF" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;"&gt;
                          &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                              &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                  &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/240x40" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                  &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/69x18" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                  &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/94x18" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                  &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/73x18" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                  &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/86x18" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td class="header container" style="margin: 0 auto;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;display: block;max-width: 662px;clear: both;"&gt;
  
                  &lt;div class="content" style="margin: 0 auto;padding: 15px;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 662px;display: block;"&gt;
                      &lt;table bgcolor="#FFFFFF" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;"&gt;
                      &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                          &lt;td align="center" style="border-top: solid #cccccc 1px;border-bottom: solid #cccccc 1px;font-size: 11px;margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;span style="color: rgb(44,147,221);margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;FREE SHIPPING&lt;/span&gt; ON ORDERS OVER XXX&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- /HEADER --&gt;
  
  
  &lt;!-- BODY --&gt;
  &lt;table class="body-wrap" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;"&gt;
      &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
          &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;/td&gt;
          &lt;td class="container" bgcolor="#FFFFFF" style="margin: 0 auto;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;display: block;max-width: 662px;clear: both;"&gt;
  
              &lt;div class="content" style="margin: 0 auto;padding: 15px;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 662px;display: block;"&gt;
                  &lt;div class="mainBg" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;background-color: #CCCCCC;background-image: url(http://placehold.it/643x638);background-repeat: repeat-x;"&gt;
                      &lt;table style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;"&gt;
                          &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                              &lt;td align="center" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                  &lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                  &lt;h3 align="center" style="margin: 0;padding: 0;font-family: &amp;quot;HelveticaNeue-Light&amp;quot;, &amp;quot;Helvetica Neue Light&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, &amp;quot;Lucida Grande&amp;quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: red;font-weight: 500;font-size: 60px;"&gt;JOYEUX ANNIVERSAIRE!&lt;/h3&gt;
                                          Dear XXXX,
                                          &lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                                  &lt;span style="font-weight: bold;margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;Happy Birthday from XXX!&lt;/span&gt;
                                                  &lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                                  To celebrate your special day, 
                                                  we’re giving you &lt;span style="color: red;margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;$XX&lt;/span&gt; to spend 
                                                  at our online store.
                                                  &lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                                  Simply enter the code 
                                                  &lt;span style="color: red;margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;XXX&lt;/span&gt; at checkout.
                                                  &lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                                  Your offer is valid for the next XX days. 
                                                  Enjoy!
                                                  &lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;br style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                                  &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/203x38" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                                  &lt;p style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;margin-bottom: 10px;font-weight: bold;font-size: 14px;line-height: 1.6;color: #5B6063;"&gt;&amp;nbsp;&lt;/p&gt;
  
                                  &lt;span class="clear" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;display: block;clear: both;"&gt;&lt;/span&gt;   
  
  
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- /BODY --&gt;
  
  &lt;!-- FOOTER --&gt;
  &lt;table class="footer-wrap" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;clear: both;"&gt;
      &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
          &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;/td&gt;
          &lt;td class="container" style="margin: 0 auto;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;display: block;max-width: 662px;clear: both;"&gt;
  
                  &lt;div class="content" style="margin: 0 auto;padding: 15px;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 662px;display: block;"&gt;
                      &lt;table style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;width: 100%;"&gt;
                          &lt;tr style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                              &lt;td align="center" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;
                                  &lt;p style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;margin-bottom: 10px;font-weight: bold;font-size: 14px;line-height: 1.6;color: #5B6063;"&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/125x16" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/21x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/23x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/21x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/22x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/22x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/22x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                      &lt;a href="#" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;"&gt;&lt;img src="http://placehold.it/110x37" style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;max-width: 100%;"&gt;&lt;/a&gt;
                                  &lt;/p&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td style="margin: 0;padding: 0;font-family: &amp;quot;Helvetica Neue&amp;quot;, &amp;quot;Helvetica&amp;quot;, Helvetica, Arial, sans-serif;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- /FOOTER --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help is much appreciated, thanks.</p>
  
  <p>EDIT: Added screenshots</p>