[Email 2 Column Responsive Layout] Centers as screen gets smaller #email

responsive-email-2-column.html

<!-- 2 - COL Responsive : BEGIN -->
<tr>
    <td valign="top" bgcolor="#eeeeee" class="cols-2" style="padding: 10px 30px 25px 30px; background-color: #eeeeee; font-family: Arial, Helvetica, sans-serif;">
        
        <!-- l-col -->
        <table class="l-col" width="270" align="left">
            <tr>
                <td valign="top" width="100%" style="font-size: 14px; line-height: 16px; color: #222222; padding: 10px 10px 10px 10px">
                    <img class="center-on-narrow" alt="alt text here" src="http://via.placeholder.com/250x150">
                    <h3 class="center-on-narrow" style="font-size:16px;">Promo heading here</h3>
                    Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
                    <br><br>
                    <a class="center-on-narrow" href="#" style="color: #222222;">Learn more</a>
                </td>
            </tr>
        </table>
        
        <!-- r-col -->
        <table class="r-col" width="270" align="right">
            <tr>
                <td valign="top" width="100%" style="font-size: 14px; line-height: 16px; color:#222222; padding: 10px 10px 10px 10px">
                    <img class="center-on-narrow" alt="alt text here" src="http://via.placeholder.com/250x150">
                    <h3 class="center-on-narrow" style="font-size:16px;">Promo heading here</h3>
                    Lorem ipsum dolor sit amet consectetur. incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
                    <br><br>
                    <a class="center-on-narrow" href="#" style="color: #222222;">Learn more</a>
                </td>
            </tr>
        </table>
        
    </td>
</tr>
<!-- 2 - COL Responsive : BEGIN -->