Gmail email table padding being removed in actual email - html

Question

I'm having a padding issue on a table in gmail. Any help would be most appreciated. Remember this is a gmail email, so all css must be inline unfortunately. Thanks!
It looks like this in the composed message with proper padding:
And then it appears to remove the padding in on the table in the actual email:
This is the piece of code with the padding in the td element:
<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;">
code:
<table style="max-width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;">
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue#2x-2.png" style="height: auto; "width="70" height="70" border="0" alt="" / >
</td>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px!important; width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;">
CREATING
</td>
</tr>
<tr>
<td style="font-size: 33px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;">
Beautiful Fitness Web Design
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 1

All I can say is, what a nightmare. I had to create td blocks of space and completely take out the padding. This is the finished code, I unfortunately don't have time to make edit so you can compare using a tool.
Finished product, after about 2 hours of work:
<table style="width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;" >
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="40px"> </td>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue#2x-2.png" style="height: auto; "width="70" height="70" border="0" alt="" / >
</td>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px; width: 100%; max-width: 425px;">
<!-- top padding -->
<tr>
<td width="600px" height="40px"></td>
</tr>
<!-- header content -->
<tr>
<td height="70">
<table width="425px" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Raleway', Helvetica, Arial, sans-serif;" >
<tr>
<td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;">
Creating
</td>
</tr>
<tr>
<td style="font-size: 30px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;">
Beautiful Fitness Web Design
</td>
<!-- <td width="20px"></td> -->
</tr>
</table>
</td>
</tr>
<!-- bottom padding -->
<tr>
<td width="600px" height="40px"></td>
</tr>
</table>
</td>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>