Two issues:

1- All emails generated from lap top, header and body do not align when received on laptop/desktop/or mobile. If same stationary sent from desk top it will appear ok on all devices.

2- Red border get cut off in Gmail client regardless from where the email is generated.

Any help is appreciated .....

Code:


<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Use the latest (edge) version of IE rendering engine -->
    <title>EmailTemplate-Responsive</title>
    <!-- The title tag shows in email notifications, like Android 4.4. -->
    <!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
    <!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <!-- CSS Reset -->
    <style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
      /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,  body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
    width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
    margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,  td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}
table table table {
    table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
    -ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
    border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
    color: inherit !important;
}
</style>

    <!-- Progressive Enhancements -->
    <style type="text/css">

        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }

        /* Media Queries */
        @media screen and (max-width: 640px) {

            .email-container {
                width: 100% !important;
            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }


    </style>


    </head>
    <body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
    <table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
      <tr>
        <td><center style="width: 100%;">

            <!-- Visually Hidden Preheader Text : BEGIN -->
            <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
            <!-- Visually Hidden Preheader Text : END --> 

            <!-- Email Header : BEGIN -->
            <table align="center" width="640" class="email-container">

                <td style="padding: 5px 0; text-align: center"><img src="http://www.kansascityproperties.com/www/images/Header-Opt.png" width="640" !important; style="display: block; style="width: 100%; max-width: 640px;" height="70"!important""  alt="alt_text" border="0"></td>
              </tr>
          </table>
            <!-- Email Header : END --> 

            <!-- Email Body : BEGIN -->
            </center><table cellspacing="5" cellpadding="5" border="0" align="center" bgcolor="#ffffff" width="640" class="email-container"><center style="width: 100%;">

            <!-- Hero Image, Flush : BEGIN -->
             <tr>
                <td bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">




                    <!--[if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch></o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml>
<![endif]-->
                <div>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 5px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"><strong> " Well Done is Better Than Well Said " </strong></td>
                      </tr>
                  </table>
                  </div>

               </td>
              </tr>
            <!-- Hero Image, Flush : END --> 

            <!-- 1 Column Text : BEGIN -->
            <tr>
                <td style="padding: 40px; text-align: left; font-family: sans-serif; font-size: 14px; mso-height-rule: exactly; line-height: 20px; color: #555555;"><span style="font-weight:bold"> Hi,  <br>
                <br>
                </span>
                <!-- Button : Begin -->

                <table cellspacing="0" cellpadding="0" border="0" align="left" style="margin: auto">
                   <tr>
                 <td style="font-family: 'Open Sans', Arial, sans-serif; text-align:left; font-size:13px;  color:#000000; line-height: 30px;" align="left" width="60%"><b>Sahran Shaoul | Broker Owner<br/>
        T: 913-897-0000 | M: 913-269-0000<br/>
        E: <a href="mailto:sahran@sahran.com" target="_blank" style="color: #000; text-decoration:underline;">sahran@sahran.com</a><br/>
        W: <a href="http://kansascityproperties.com/www/default.aspx" target="_blank" style="color: #000; text-decoration:underline;">www.kansascityproperties.com</a></b></td>
                  </tr>
                  </table>

                <!-- Button : END --></td>
              </tr>

            <tr>
       <td style=" background-color: #aea8a8; padding: 7px 3px 0px 0;">
       <table class="table-inner" cellpadding="0" cellspacing="0" align="centerder="0" width="65%" >
            <tbody>
               <tr>
       <td height="42" width="42" style="line-height:0px;" align="center" valign="top"><a href="https://twitter.com/kansascityhome" target="_blank"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="http://kansascityproperties.com/www/images/twitter.png" alt="Twitter" height="42" width="42" /></a>
        </td>
      <td height="42" width="42" style="line-height:0px;" align="center" valign="top">
      <a href="https://www.facebook.com/Kansas-City-Properties-102810192407/" target="_blank"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="http://www.kansascityproperties.com/www/images/facebook.png" alt="Facebook" height="42" width="42" /></a>
      </td>
     <td height="42" width="42" style="line-height:0px;" align="center" valign="top">
    <a href="https://www.linkedin.com/in/sahran-shaoul-95984a5?trk=hp-identity-name" target="_blank"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="http://kansascityproperties.com/www/images/linkedin.png" alt="Linkedin" height="42" width="42" /></a>
                                                         </td>
    <td height="42" width="42" style="line-height:0px;" align="center" valign="top">
    <a href="https://plus.google.com/100896520144528940585/posts" target="_blank"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="http://kansascityproperties.com/www/images/google.png" alt="Google Plus" height="42" width="42" /></a>
                                                         </td>
  <td height="42" width="42" style="line-height:0px;" align="center" valign="top">
  <a href="https://www.youtube.com/channel/UCHjFLioAk_Hd_hQfZTyOOcA" target="_blank"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="http://kansascityproperties.com/www/images/youtube1.png" alt="Youtube" height="42" width="42" /></a>
   </td> 
                                                           </tr>
                                                    </tbody></table>
                                               </td>
                                          </tr>
                                           <!--Space-->


                                 <tbody>    


    <td align="center"> <table style="border:7px solid #FF0000; valign="top table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#F3F3F3">    

              <tr>
    <td bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:60px; background-position: center center !important;">
                    <v:fill type="tile"  color="#222222" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->

               <!--[if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch></o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml>
<![endif]-->

   <div>
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
     <td valign="middle" style="text-align: center; padding: 3px; font-family: sans-serif; font-size: 20px; mso-height-rule: exactly; line-height: 30px; color: #ffffff;"><b> Featured Properties </b></td>
                      </tr>
                  </table>
                  </div>
                </td>
              </tr>
            <!-- Hero Image, Flush : END --> 

            <!-- 1 Column Text : BEGIN --></td>
              </tr>

            <!-- Two Even Columns : BEGIN -->

            <tr>
                <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">

                    <tr>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">


                        <tr>

    <td style="padding: 10px; align="center"><a href=http://kansascityproperties.idxbroker.com/idx/details/listing/a052/2069361/13210-Outlook-Street-Overland-Park-KS-66209?widgetReferer=true" target="_blank"><img src="http://kansascityproperties.com/www/local/image1_112.jpg" alt="img" height="150" width="240" border="0" class="fluid"" /></a></td>        </tr>           

         <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> $799,950<br>13210 Outlook Street<br>Overland Park, Ks. 66209 </td>
                      </tr>
                      </table></td>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

                        <tr>
        <td style="padding: 10px; align="center"><a href=http://kansascityproperties.com/www/current_listingsdetails.aspx?id=111 target="_blank"><img src="http://kansascityproperties.com/www/local/image1_111.jpg" alt="img" height="150" width="240" border="0" class="fluid"" /></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> $319,999<br>12714 West 120th. Street<br>Overland Park, Ks. 66209 </td>
                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>
            <!-- Two Even Columns : END --> 
        <!-- Two Even Columns : BEGIN -->



            <tr>
                <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">

                    <tr>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">


                        <tr>

    <td style="padding: 10px; align="center"><a href=http://kansascityproperties.com/www/current_listingsdetails.aspx?id=113 target="_blank"><img src="http://kansascityproperties.com/www/local/image1_113.jpg" alt="img" height="150" width="240" border="0" class="fluid"" /></a></td>       </tr>           

         <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> $239,950<br>10318 Garnett Street<br>Overland Park, Ks. 66214 </td>
                      </tr>
                      </table></td>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

                        <tr>
        <td style="padding: 10px; align="center"><a href=http://kansascityproperties.com/www/current_listingsdetails.aspx?id=108 target="_blank"><img src="http://kansascityproperties.com/www/local/image1_108.jpg" alt="img" height="150" width="240" border="0" class="fluid"" /></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> $244,950<br>2108 Ash Street<br>Pleasant Hill, Mo. 64080 </td>
                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>
            <!-- Two Even Columns : END --> 



            <!-- Hero Image, Flush : BEGIN -->
             <tr>
                <td background="141414" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:40x; background-position: center center !important;">
                    <v:fill type="tile" color="#222222" />
                    <v:textbox inset="0,0,0,0">


                   <!--[if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch></o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml>
<![endif]-->





               <div>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 5px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"> <b>" Where Clients Leave With The Best Real Estate Service & Values "</b> </td>
                      </tr>
                  </table>
                  </div>

               </td>
              </tr>
            <!-- Hero Image, Flush : END --> 

            <!-- 1 Column Text : BEGIN --></td>
              </tr>
            <!-- Hero Image, Flush : END --> 



          </table><br> </td></tr></center>

    </table>
    <br><br><br>
</table></body>
</html>