I've been moving to using classes instead of inline styles and I've run into a strange issue with comcast mail.
It seems to be losing my padding-top and padding-bottom properties.

Has anyone experienced this issue? And does anyone have fix for it?

for reference:
Screenshot
Screenshot

My code for one of the cards in the screen shot:


<table cellpadding="0" cellspacing="0" border="0" class="M100percent" width="280" align="left"><!-- Grid 1 (top left) -->
    <tr>
        <td>
            &nbsp;
        </td>
    </tr>
    <tr>
        <td class="card" valign="top"> <!-- card #1 (top left) -->
            <table align="center" cellpadding="0" cellspacing="0" class="M90percent" style="width:240px;" width="240">
                <tr>
                    <td class="headline">
                        <a href="#" target="_blank" class="headlineLink">
                        Building a House of Cards
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="body">
                        As a kid, it was great to convert something that was 2D to make something 3D, the classic house of cards, an interesting but unsustainable art form. It is never as simple as it may seem to put things together.
                    </td>
                </tr>
                <tr>
                    <td class="readMore">
                    <!--[if mso]>
                      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:110px;" stroke="f" fillcolor="#024a69">
                        <w:anchorlock/>
                        <center>
                      <![endif]-->
                          <a href="#" target="_blank" class="Btn" style="width:110px;">
                          READ MORE
                          </a>
                      <!--[if mso]>
                        </center>
                      </v:rect>
                    <![endif]-->
                    </td>
                </tr>
            </table>
        </td><!-- end card #1 (top left) -->
    </tr>
</table><!-- end Grid 1 (top left) -->

And the style tag info that goes with it:


    td{font-family: 'Source Sans Pro', 'Calibri', 'Avenir', Arial, Helvetica, sans-serif !important;}

    .Btn{
        transition: 0.5s;
        border: 1px solid #024a69;
        background-color: #024a69;
        color:#ffffff;
        display:inline-block;
        font-size:13px;
        font-weight:bold;
        line-height:30px;
        height: 30px;
        text-align:center;
        text-decoration:none;
        -webkit-text-size-adjust:none;
    }

    .Btn:hover{
        color:#024a69 !important;
        background-color:rgba(0,0,0,0) !important;
    }

    .headline{
        font-weight: lighter;
        font-size: 23px;
        color: #024a69;
        padding-top: 25px;
    }

    .body{
        font-size: 13px;
        line-height: 18px;
        color: #565656;
        font-weight: normal;
        padding-top: 8px;
    }

    .readMore{
        padding-top:20px;
        padding-right: 0;
        padding-bottom: 14px;
        padding-left:0px;
        text-align: left;
    }

    .headlineLink{
        color: #024a69;
        text-decoration:none;
    }



@media screen and (max-width: 600px) {
    .M100percent{width: 100% !important;}
    .M90percent{width: 90% !important;}
    .card{padding:0 5% 0 5% !important; height:auto !important;}
    .readMore{padding:20px 0 25px 0 !important;}
    .featureHeadline{ padding:40px 0px 0 0px;}
}