How to center this text inside a table row in e-mail template

Question

I am trying to center this lorem ipsum text inside a table row, but for some reason the images above it - even though they are in the separate tr - seem to affect that. Only after I remove them, the text gets centered... How could I prevent them from affecting the text placement below..?

Code below:

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

    * {
        font-family: 'Open Sans', sans-serif;
    }

    .main-text {
       /* padding-left: 130px;*/
        padding-bottom: 45px;
        margin: 0 auto;
    }

    #main {
        background: lightblue;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        width: 620px;
    }

    table {
        font-family: sans-serif;
    }

    .img-left {
        padding: 20px 20px 80px 40px;
    }

    .img-right {
        width: 85px;
        float: right;
        padding: 15px 30px;
        position: relative;
        right: -10px;
    }

<table id="main" border="0" cellpadding="0" cellspacing="0" id="templateColumns">
    <tr class="header-test">
        <td align="center" valign="top" width="50%" class="templateColumnContainer img-left">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" style="padding-top: 5px;">
                        <img src="http://via.placeholder.com/350x150" width="210" style="max-width:210px; position: relative; left: -15px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <a href="#" target="_blank">
                            <img src="http://via.placeholder.com/350x150" 
                                 width="85" class="columnImage img-right" />
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" style="width: 100%;">
            <table style="margin: 0 auto;">
                <tr>
                    <td></td>
                    <td class="main-text" style="color: #ffffff; text-align: center">
                        <p style="font-size: 12px; line-height: 1;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, veniam sint? Ducimus eius necessitatibus minima nemo ratione. Nam atque aliquam quia itaque, explicabo qui, fuga alias unde nulla quo quaerat.</p>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

Your inner table has only the width of the wrapping table cell, so you have a space on the right side. Add colspan="2" to the wrapping td, and it should be centered like in the snippet below.

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

    * {
        font-family: 'Open Sans', sans-serif;
    }

    .main-text {
       /* padding-left: 130px;*/
        padding-bottom: 45px;
        margin: 0 auto;
    }

    #main {
        background: lightblue;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        width: 620px;
    }

    table {
        font-family: sans-serif;
    }

    .img-left {
        padding: 20px 20px 80px 40px;
    }

    .img-right {
        width: 85px;
        float: right;
        padding: 15px 30px;
        position: relative;
        right: -10px;
    }

<table id="main" border="0" cellpadding="0" cellspacing="0" id="templateColumns">
    <tr class="header-test">
        <td align="center" valign="top" width="50%" class="templateColumnContainer img-left">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" style="padding-top: 5px;">
                        <img src="http://via.placeholder.com/350x150" width="210" style="max-width:210px; position: relative; left: -15px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <a href="#" target="_blank">
                            <img src="http://via.placeholder.com/350x150" 
                                 width="85" class="columnImage img-right" />
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <!-- add colspan="2" in the line below! -->
        <td align="left" style="width: 100%;" colspan="2">
            <table style="margin: 0 auto;">
                <tr>
                    <td></td>
                    <td class="main-text" style="color: #ffffff; text-align: center">
                        <p style="font-size: 12px; line-height: 1;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, veniam sint? Ducimus eius necessitatibus minima nemo ratione. Nam atque aliquam quia itaque, explicabo qui, fuga alias unde nulla quo quaerat.</p>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>