Hello, inside my email template I am using spacer tables to separate the content sections. For some reason, the spacer tables are not going 100% width in the email. This works fine in other applications/clients, just an issue in Gmail Andorid App. Also, there is a small 1 px line around each table in the email even though I have set each table to have 0 border. I cannot seem to figure this out and it's really driving me crazy. I have tried adding a BGCOLOR to the surrounding <TD> elements and removing the <TBODY> elements in case that was the cause. Nothing seems to have worked.

Below is an image of the email from Gmail Android App with code snippets below that (for some reason I h=am having issues formatting the code correctly in the Markdown):

Gmail App Preview
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Define Charset -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Responsive Meta Tag -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <title>___ SuperTemplate</title>

    <style>
    table {
        border-collapse:collapse !important;
    }
    table[class=viewportWrapper] {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    td[class=columnHeading] {
        font-weight : bold;
        font-size   : 18px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }   

    p {
        font-size: 16px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    p.small {
        font-size: 14px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    img {
            display                : block !important;
            border                 : 0;
            -ms-interpolation-mode : bicubic;
    }

    a, .columnHeading a, .columnBody a {
        color           : #FF0000 !important;
        text-decoration : underline !important;
        font-weight     : bold;
    }

    .bylineBody a {
        color           : #1a6aa4 !important;
        text-decoration : underline !important
    }

    .hs_cos_wrapper_type_follow_me a {
        display: inline-block;
    }

    /*********** MEDIA QUERIES FOR RESPONSIVE EMAIL ***********/


    @media only screen and (max-width: 640px) {
        table[class=viewportWrapper] {
            width  : 480px !important;
            Margin : auto;
        }
    }


    @media only screen and (max-width: 479px) {
        table[class=viewportWrapper] {
            width  : 320px !important;
            Margin : auto;
        }

        table[class=viewportWrapper] table{
            width  : 100% !important;
        }       

        span.breakTextMobile {
            display: block;
        }
    }

    </style>
    </head>
    <!-- 
     marginheight / topmargin = specify a height in pixels between the content and the top and bottom of the frame.
     marginwidth / leftmargin = specify a width in pixels between the content and the sides of the frame.
     -->
    <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" style="Margin-top:0;Margin-right:0;Margin-bottom:0;Margin-left:0;Margin:0;background:#4A4A4A;">

    <!-- Preview text (text which appears right after subject in certain email clients) -->
    <div id="preview_text" style="display:none!important;font-size:1px;line-height:1px;">This will be used as the preview text for the email</div>


    <!--
    **********      MODULE - VIEW IN BROWSER        **********
    -->

    <!-- SECTION WRAPPING TABLE - 100% Width--> 
    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="" style="" data-module="viewInBrowser" bg-color="viewInBrowserBackgroundColor" bgcolor="#4A4A4A">
        <tbody>
            <tr>
                <td align="center">
                    <table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600">
                        <tbody>
                            <tr>
                                <td align="center" style="color:#E6E6E6;">
                                    <p class="small">Having issue seeing this email? <span class="breakTextMobile">View it in the browser.</span></p>
                                </td>
                            </tr>
                        </tbody>
                    </table>

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

    <!--
    **********      MODULE - HEADER         **********
    -->

    <!-- SECTION WRAPPING TABLE - 100% Width-->
    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="" style="" data-module="header" bg-color="sectionBackgroundColor" bgcolor="#4A4A4A">
        <tbody>
            <tr>
                <td align="center">
                    <!-- HEADER WRAPPING TABLE - .viewportWrapper -->
                    <table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600" bgcolor="#FFFFFF">

                            <tr>
                                <td style="padding-top:20px;padding-right:20px;padding-bottom:0px;padding-left:20px;width:100%;">
                                    <!-- TOP IMAGE FOR HEADER -->
                                    <img src="http://placehold.it/560x100" style="width:100%;display:block;"/>
                                </td>
                            </tr>

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


    <!--
    **********      MODULE - SINGLE COLUMN      **********
    -->

    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="" style="" data-module="columnOne" bg-color="sectionBackgroundColor" bgcolor="#4A4A4A">
        <tbody>
            <tr>
                <td align="center">
                    <!-- HEADER WRAPPING TABLE - .viewportWrapper -->
                    <table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600" bgcolor="#FFFFFF">

                            <tr>
                                <td bgcolor="#ffffff" style="padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;width:100%;">
                                    <table cellpadding="0" cellspacing="0" border="0" align="center">
                                        <tbody>
                                            <tr>
                                                <td bgcolor="#E6E6E6" style="padding:10px">
                                                    <h2>Something Powerful</h2>
                                                    <h3>Tell The Reader More</h3>
                                                    <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
                                                    <p>Remember:</p>
                                                    <ul>
                                                        <li>Bullets are great</li>
                                                        <li>For spelling out <a href="#">benefits</a> and</li>
                                                        <li>Turning visitors into leads.</li>
                                                    </ul>       
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>

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

    <!--
    **********      MODULE - DIVIDER IN TEXT        **********
    -->

    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="" style="" data-module="dividerInText" bg-color="sectionBackgroundColor" bgcolor="#4A4A4A">
        <tbody>
            <tr>
                <td align="center">
                    <!-- HEADER WRAPPING TABLE - .viewportWrapper -->
                    <table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600" bgcolor="#FFFFFF">
                        <tbody>
                            <tr>
                                <td bgcolor="#ffffff" style="padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;width:100%;">
                                    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                                        <tbody>
                                            <tr>
                                                <td bgcolor="#E6E6E6" style="line-height:4px;font-size:4px;width:100%;">
                                                    &nbsp;
                                                </td>
                                            </tr>
                                            <tr>
                                                <td bgcolor="#CCCCCC" style="line-height:1px;font-size:1px;width:100%;">
                                                    &nbsp;
                                                </td>
                                            </tr>
                                            <tr>
                                                <td bgcolor="#F3F3F3" style="line-height:1px;font-size:1px;width:100%;">
                                                    &nbsp;
                                                </td>
                                            </tr>
                                            <tr>
                                                <td bgcolor="#E6E6E6" style="line-height:4px;font-size:4px;width:100%;">
                                                    &nbsp;
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>        
                                </td>
                            </tr>
                        </tbody>    
                    </table>
                </td>
            </tr>
        </tbody>
    </table>


    <!--
    **********      MODULE - TWO COLUMN w/ HEADINGS     **********
    -->

    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="" style="" data-module="columnTwoWithHeadings" bg-color="sectionBackgroundColor" bgcolor="#4A4A4A">
        <tbody>
            <tr>
                <td align="center">
                    <!-- HEADER WRAPPING TABLE - .viewportWrapper -->
                    <table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600" bgcolor="#FFFFFF">
                        <tbody>
                            <tr>
                                <td bgcolor="#ffffff" style="padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;width:100%;">
                                    <table cellpadding="0" cellspacing="0" border="0" align="center">
                                        <tbody>
                                            <tr>
                                                <td bgcolor="#E6E6E6" style="padding:10px">

                                                    <!-- LEFT SIDE TABLE (COL 1) = 259.2 px -->
                                                    <table cellpadding="0" cellspacing="0" border="0" align="left" width="48%" class="">
                                                        <tbody>
                                                            <tr>
                                                                <td class="columnHeading">
                                                                  A Column Heading
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="columnBody">

                                                                                <h2>Something Powerful</h2>
                                                                                <h3>Tell The Reader More</h3>
                                                                                <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
                                                                                <p>Remember:</p>
                                                                                <ul>
                                                                                    <li>Bullets are great</li>
                                                                                    <li>For spelling out <a href="#">benefits</a> and</li>
                                                                                    <li>Turning visitors into leads.</li>
                                                                                </ul>

                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <table cellpadding="0" cellspacing="0" border="0" align="left" width="1">
                                                        <tbody>
                                                            <tr>
                                                                <td style="line-height:20px;font-size:20px;">
                                                                    &nbsp;
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <!-- RIGHT SIDE TABLE (COL 2) = 259.2px -->
                                                    <table cellpadding="0" cellspacing="0" border="0" align="right" width="48%" class="" style="border-collapse:collapse;">
                                                        <tbody>
                                                            <tr>
                                                                <td class="columnHeading">
                                                                    A Column Heading"
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="columnBody">
                                                                                <h2>Something Powerful</h2>
                                                                                <h3>Tell The Reader More</h3>
                                                                                <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
                                                                                <p>Remember:</p>
                                                                                <ul>
                                                                                    <li>Bullets are great</li>
                                                                                    <li>For spelling out <a href="#">benefits</a> and</li>
                                                                                    <li>Turning visitors into leads.</li>
                                                                                </ul>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>