Hello,

I'm building responsive email templates and when I was testing them, I noticed that gmail sets the content in some frame and a white space is added to my template from sides.

Also I've tryed to set padding from sides to my template, but in this case google includes this to its default frame and I have a double padding (white space) from sides. As I know media queries aren't supported by Gmail, I've decided to set the padding in media query for that it works for other clients but not gmail. But in this case media hasn't worked also for yahoo web browser email and it looks the same as on screenshot 2.
And for all others I have the look I need.

Question 1: Is it possible to remove this Gmail default frame, for that the content fits the full screen as it's on screenshot 2?
Question 2: How can I do so that the spacing from left and right is the same on all email clients?

Screenshots below to show what I'm talking about.

Gmail:
screenshot1

Yahoo:
screenshot2

screenshot3

I'm adding a piece of my code here if this might be more helpful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Get GIS Jobs</title>
  </head>
    <body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; width: 100% !important">
        <style type="text/css">
            #outlook a {padding:0;} 
            #outlook p {margin:0 !important;}
            .ecxpostYourJob p {margin: 0 0 0 !important;}
            body {
            width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
            }
            .ExternalClass {
            width: 100%;
            }
            .ExternalClass *{
            line-height: 100%;
            }
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

            #backgroundTable {
            margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;
            }
            img {
            outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;
            }
            a {
                outline: none;
            }
            .header .logoLink:hover {
                text-decoration: underline !important;
            }

            @media screen and (max-width: 600px) {
              table.container {
                width: 100% !important;
              }
              td[class="padding"]{
                  padding: 10px 10px 10px 10px !important;
                }  
            }
        </style>
        <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="border-collapse: collapse; line-height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important">
            <tr>
                <td class="padding" valign="top" style="border-collapse: collapse;"> 
                    <!--[if (gte mso 9)|(IE)]>
                        <table width="580" align="center" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td>
                    <![endif]-->
                    <table class="container" cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="border-collapse: collapse; max-width: 580px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0 auto;">
                        <tr>
                            <td align="left" width:"100%" style="border-collapse: collapse; text-align: left;">
                                <table class="header" width="100%" cellpadding="0" cellspacing="0" border="0" style="background: #0e245d; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" bgcolor="#0e245d">
                                    <tr>
                                        <td height="24" style="border-collapse: collapse"></td>
                                        <td style="border-collapse: collapse"></td>
                                        <td style="border-collapse: collapse"></td>
                                    </tr>
                                    <tr>
                                        <td width="15" valign="top" style="border-collapse: collapse"></td>
                                        <td valign="top" style="border-collapse: collapse">
                                            <a href="http://www.getgisjobs.com/" class="logoLink" style="color: #fff; font-family: Tahoma,Verdana,Helvetica,sans-serif; font-size: 30px; font-weight: bold; line-height: 30px; text-decoration: none"><span style="color: #ff9900">Get</span> <span style="color:#fff;">GIS Jobs</span></a>
                                        </td>
                                        <td width="15" valign="top" style="border-collapse: collapse"></td>
                                    </tr>
                                    <tr>
                                        <td height="26" style="border-collapse: collapse"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!--[if IE]>
                                </td>
                            </tr>
                        </table>
                    <![endif]-->
                </td>
            </tr>
        </table>    
    </body>
</html>