Hi

Having an issue with Android email app where the email body is responsive but sits to the left instead of being centered.
Have already tested some of the recommended code like:
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; }

but no change.

Any further help would be great, thanks.

Here is the code for the head and a snippet of the body:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<head>

    <style type="text/css">
        body {background-color:#702c6d !important; margin:0 !important; padding:0 !important;}
        a.viewemailonline {font-size:11px; color:#ffffff; text-decoration:none;}
        a.viewemailonline:link {font-size:11px; color:#ffffff; text-decoration:none;}
        a.viewemailonline:visited {font-size:11px; color:#ffffff; text-decoration:none;}
        a.viewemailonline:hover {font-size:11px; color:#ffffff; text-decoration:none;}
        a.viewemailonline:active {font-size:11px; color:#ffffff; text-decoration:none;}
        a.unsubscribe {font-size:11px; color:#ffffff; text-decoration:none;}
        a.unsubscribe:link {font-size:11px; color:#ffffff; text-decoration:none;}
        a.unsubscribe:visited {font-size:11px; color:#ffffff; text-decoration:none;}
        a.unsubscribe:hover {font-size:11px; color:#ffffff; text-decoration:none;}
        a.unsubscribe:active {font-size:11px; color:#ffffff; text-decoration:none;}
        th {font-weight:normal !important;}
        .mcnButtonContent:hover, .on-hover:hover{color: #ffffff !important; background:#702c6d !important;}
        .mcnButtonContent:hover a {color: #ffffff !important;}
        .hd-bg {background: url(images/hd-bg.jpg) center no-repeat;}
        .ft-bg {background: url(images/ft-bg.jpg) center no-repeat;}
        .link a:visited, .link a:active, .link a {color:#ffffff !important;}
        @media only screen and (max-width:480px) {
            body {min-width:100%; margin:0 !important; padding:0 !important; background-color:#702c6d !important;}
            table {margin:0 !important; padding:0 !important;}
            table[class~=container], td[class~=container] {min-width:320px !important; max-width:320px !important; width:100% !important;}
            table[class~=stackonmobile], td[class~=stackonmobile], th[class~=stackonmobile] {display:block !important; clear:both !important; min-width:320px !important; max-width:320px !important; width:auto !important; margin:0 !important;}

            *[class~=logo] img {width:80% !important; height:auto !important;}
            *[class~=title] img {width:90% !important; height:auto !important;}
            *[class~=hd-bg] {background-size:cover !important;}
            *[class~=ft-bg] {background-size:cover !important;}
            *[class~=image] img {max-width:100% !important; width:100% !important; height:auto !important;}
            *[class~=btn] {line-height:30px !important;}
            *[class~=noborder] {border:none !important; border:0 !important;}
            *[class~=border] {border-bottom:2px solid #c2c2c2 !important; height:20px !important; line-height:20px !important; font-size:20px !important;}
            *[class~=hideonmobile] {width:0px !important; overflow:hidden !important; display:none !important;}
            *[class~=widthonmobile] {max-width:20px !important; width:20px !important;}
            *[class~=heightonmobile] {max-height:20px !important; height:20px !important;}
            *[class~=growonmobile] {max-width:600px !important; width:100% !important;}
        }           
    </style>
</head>

<body bgcolor="#702c6d" style="margin:0; padding:0;color:#702c6d;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td align="center" valign="top">
                <table cellpadding="0" cellspacing="0" border="0" width="600" class="container" style="width:600px;">
                    <tr>
                        <td align="center" valign="bottom">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="hd-bg">
                                <tr>
                                    <td style="font-size:20px; line-height:20px;" height="20">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff;">view email online</td>
                                </tr>
                                <tr>
                                    <td style="font-size:20px; line-height:20px;" height="20">&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" valign="top" bgcolor="#FFFFFF">
                            <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
                                <tr>
                                    <td align="left" valign="top" class="logo"><a href="##"><img src="images/logo-1.jpg" width="250" height="110" alt="" style="border:none;"/></a></td>
                                    <td align="right" valign="top" class="logo"><a href="##"><img src="images/logo-2.jpg" width="253" height="110" alt="" style="border:none;"/></a></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>