HTML rendering incorrectly in Outlook 2016?

Question

I have created a simple HTML email template using HandlebarsJS.

I have set up the text and the table to be centered in the email.

However the table element is centred at the left side but on the right it spills to the right hand border of the Email.

This does not happen when I open the HTML file in chrome - only in Outlook.

How can I avoid this in Outlook?

HTML relating to the table:

    <div class="table">
    <table id="carTable" role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tbody>
        <tr>
            <th>Car Number</th>
            <th>Group</th>
        </tr>
        <!-- {{#each cars}} -->
        <tr>
            <td>{{carNumber}}</td>
            <td>{{processGroup}}</td>
        </tr>
        <!--{{/each}} -->
        </tbody>
    </table>
</div>

CSS relating to table:

    <style>
    #carTable tr, td, th {
   padding: 10px;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.38;
   letter-spacing: normal;
   color: #333333;
   }

   #carTable{
   border: solid 1px #cccccc;
   }

   #carTable td,
   th {
   height: 30px;
   transition: all 0.3s;
   /* Simple transition for hover effect */
   }

   #carTable th {
   background: #DFDFDF;
   /* Darken header a bit */
   font-weight: bold;
   text-align: left
   }

   #carTable td {
   background: #FAFAFA;
   text-align: left
   }

   /* Cells in even rows (2,4,6...) are one color */
   #carTable tr:nth-child(even) td {
   background: #F1F1F1;
   }

   /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
   #carTable tr:nth-child(odd) td {
   background: #FEFEFE;
   }

   #carTable tr>:nth-child(1):not(th){
   font-weight: bold;
   color: #2d89ac;
   }
   </style>

CodePen link with full HTML code: https://codepen.io/Java123999/pen/zYGBoPe

Screenshot of issue, note table in line with paragraphs on left but not on right

Answer 1

Outlook uses Microsoft Word as a rendering engine. You have to play by Outlook's rules. Use old school HTML with tables and include styles inline where possible. To quickly test in Outlook, assuming you have access to it, try sending yourself an HTML email. I don't know what version you're using, but a quick search for "outlook send html email" should provide good results.