'How to fix header and footer of HTML email displayed in Gmail

I'm working on an email template using the Act-On email marketing service. All is well, except on Gmail desktop, the header and footer extend to the edges of the window... which is not what I want. Any idea what would be causing this? Below is a link to a screen grab.
It looks fine on Gmail for mobile, but not on desktop. Thanks in advance.
Act-On Gmail email error
<!doctype html>

<head>
<title>ALHI Insider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=EB+Garamond|Montserrat&display=swap');
</style>
<style type="text/css">
    html,
    body {
        Margin: 0 auto !important;
        padding: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }

    html {
        -ms-text-size-adjust: 100%;
    }

    table, td {
        mso-table-lspace: 0pt !important;
        mso-table-rspace: 0pt !important;
    }

    img {
        -ms-interpolation-mode:bicubic;
    }

    a {
        text-decoration: none;
    }
    /* unvisited link */
a:link {
  color: #6d6e71;
}

/* visited link */
a:visited {
  color: #6d6e71;
}

/* mouse over link */
a:hover {
  color: #009aa6;
}

/* selected link */
a:active {
  color: #009aa6;
}
</style>
<style type="text/css">
body, table, tr, td, div, p, textarea, input
  html {
  font-size: 100%;
}
body, table, tr, td, div, textarea, input
{
   font-size: 100% !important;
    font-family: 'Montserrat', "arial, sans-serif";
    font-family: 'EB Garamond', serif;
}
  h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif !important;
 }
  h1 {
    font-size: 20px !important;
    font-weight: bold;
    color: #6d6e71;
    mso-line-height-rule: exactly;
    line-height: 22px !important;
    text-align: center;
  }
   h2 {
    font-size: 15px !important;
    font-weight: bold;
    color: #6d6e71;
    mso-line-height-rule: exactly;
    line-height: 20px !important;
    text-align: center;
  }
    h3 {
    font-size: 15px !important;
    font-weight: bold;
    color: #6d6e71;
    mso-line-height-rule: exactly;
    line-height: 18px !important;
    text-align: center;
  }
   p {
    font-size: 16px !important;
    font-family: 'EB Garamond', serif !important;
    color: #6d6e71;
    mso-line-height-rule: exactly;
    line-height: 18px !important;
    text-align: center;
  }
    .attr-marker:not(:empty) {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold;
    color: #009aa6;
    mso-line-height-rule: exactly;
    line-height: 30px !important;
    text-align: center;
  }   
      .attr-marker:not(:empty) a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold;
    color: #002147;
    mso-line-height-rule: exactly;
    line-height: 30px !important;
    text-align: center;
  } 
   img {
    display: inline-block; 
    height: auto !important;
    }
    
    .menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
text-align: center;
  overflow: hidden;
  background-color: #0a1f3e;
}
    
        .menu li {
  display: inline-block;
  min-width: 5em;
  margin: 0 0.5em;
}
    
    .menu a {
        text-decoration: none; font-family: 'Montserrat', sans-serif !important;
        text-transform: uppercase;
        font-size: 12px;
  display: block;
        color: white !important;
        padding:.75em;
        position: relative;}
    
    
    li {
    font-size: 16px !important;
    font-family: 'EB Garamond', serif !important;
    color: #6d6e71;
    mso-line-height-rule: exactly;
    line-height: 18px !important;
  }
    
    li a:hover {
  background-color: #009aa6;
}
    
</style>
</head>
<body align="center" width="100%" style="background-color:#f5f6f7; Margin: 0; padding: 0 !important; mso-line-height-rule: exactly;">

  <table border="0" role="presentation" width="100%" max-width="600px" style="background-color:#f5f6f7" cellspacing="0" cellpadding="0" class="container" align="center">
    <tr>
      <td width="100%" style="text-align:center;">
        <table border="0"  role="presentation" bgcolor ="#f5f6f7" align="center" style="background-color:#f5f6f7;" cellpadding="0" cellspacing="0">
            <tr>
             <td valign="middle" width="100%" align="center">{{HEADER}}</td>
          </tr><tr>
         
            <tr><td width="100%" align="center" style="text-align: center; vertical-align: middle;"><ul class="menu"><li><a href="http://us.alhi.com/" target="_new">U.S. Hotels</a></li><li><a href="https://eu.alhi.com/" target="_new">European Hotels</a></li><li><a href="https://asia.alhi.com/" target="_new">Asian Hotels</a></li><li><a href="https://www.alhi.com/hotel-guide/hotel-guide-home.html" target="_new">Annual Hotel Guide</a></li></ul></td><tr><td style="padding-bottom: 0px" bgcolor="#ffffff"></td></tr>
         
          <tr>
             <td valign="top" width="100%" align="center" style="background-color:#ffffff;" bgcolor="#ffffff">{{LOGO}}</td>
            </tr>
            <tr>
                <td valign="top" width="100%" align="center" >
                  <table border="0" role="presentation" style="background-color:#002147; border:14px solid #002147" bgcolor="#002147" cellpadding="0px" cellspacing="0">
                                <tr>
                                    <td align="left"> {{TEXT}}</td>
                                </tr>
                              </table>
            </tr>
           <tr>
                <td valign="top" align="center" style="background-color:#002147" bgcolor="#002147">
                   <table border="0" role="presentation" style="background-color:#002147;  max-width: 600px;" bgcolor="#002147" cellpadding="0px" cellspacing="0">
                     <tr>
                       <td  align="center" style="padding-bottom: 10px;"><h1><span style="color: #FFFFFF">Follow Us</span></h1></td>
                    </tr>
                    <tr>
                        <td style="width: 100%; display: inline-block;">
                           <table border="0" role="presentation" style="background-color:#002147" bgcolor="#002147" cellpadding="0px" cellspacing="0">
                             <tr>
                        <td style="width: 100%; display: inline-block;">
                           <table border="0"  style="background-color:#002147; max-width: 600px;" bgcolor="#002147" cellpadding="0px" cellspacing="0" align="center">
                    <tr>
                      <td align="center" style="width:100px;"></td>
                        <td align="center" style="width:100px;"><a href="https://anchor.fm/beyondthemeetingroom" target="_new"><img src="Podcast-Social-Icon.png" width="36" height="36" alt="Podcast Icon" /></a></td>
                        
                      <td align="center" style="width:100px;"><a href="https://www.linkedin.com/company/associated-luxury-hotels-" target="_new"><img src="Linkedin-Social-Icon.png" width="36" height="36" alt="LinkedIn Icon" /></a></td>
                        
                      <td align="center" style="width:100px;"><a href="https://www.instagram.com/alhi.gso/" target="_new"><img src="Instagram-Social-Icon.png" width="36" height="36" alt="Instagram Icon" /></a></td>

                      <td align="center" style="width:100px;"><a href="https://www.facebook.com/ALHI.GlobalSales" target="_new"><img src="Facebook-Social-Icon.png" width="36" height="36" alt="Facebook Icon" /></a></td>
                      <td align="center" style="width:100px;"></td>
</tr>
                            </table>
                         </td>
                     </tr>
                     <tr>
                       <td align="center" style="padding-top: 5px; padding-bottom: 20px;"><a href="https://alhi.com" target="_new"><h1><span style="color: #FFFFFF">alhi.com</span></h1></a></td>
                    </tr>
                    </table>
                </td>
                          
             </tr>
        </table>
        </td>
     </tr>
     <tr>
       <td valign="top" align="center">{{FOOTER}}</td>
    </tr>
    </table>
</body>

</html>
html email gmail
Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution	Source
'How to fix header and footer of HTML email displayed in Gmail

Sources

Related Questions
