I've been trying to figure out why my columns won't stack and my fluidity isn't working in gmail, but they work just fine in outlook. I know that my code is still sloppy because i'm currently learning best practices, but I was hoping someone could help me out.


<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0"/>
<style type="text/css">
    /* CLIENT-SPECIFIC STYLES */
    #outlook a { padding: 0; }
    .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode:bicubic; }

    /* RESET STYLES */
    body { margin:0; padding:0; }
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { height:100% !important; margin: 0; padding: 0; width: 100% !important; }

    /* iOS BLUE LINKS */
    .apple-footer a { color:#666666; text-decoration: none; }

@media only screen and (max-width: 600px)and (min-width: 0px) {
  table[class="fluid-table"] {
    width: 100% !important;
  }
    img[class="fluid-image"] {
    width: 100% !important;
    height: auto !important;
  }
         .templateColumns{
            width:100% !important;
        }

        .templateColumnContainer{
            display:block !important;
            width:100% !important;
            margin: auto !important;
        }

        .columnImage{
            height:auto !important;
            max-width:300px !important;
            width:100% !important;
            margin: auto !important;

        }

        .leftColumnContent{
            font-size:16px !important;
            line-height:125% !important;
            margin: auto !important;
        }

        .rightColumnContent{
            font-size:16px !important;
            line-height:125% !important;
            margin: auto !important;
        }
    }
}   
</style>
<!--[if mso]>
<style type=”text/css”>
  .body-text {
    font-family: Arial, sans-serif;
  }
</style>
<![endif]-->
</head>

<body style="margin: 0; padding: 0;" bgcolor="#e6e7e8" style="background-color: #e6e7e8">
<!-- HIDDEN PREHEADER TEXT START -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">

</div>
<!-- HIDDEN PREHEADER TEXT END -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-
layout: fixed;">
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" align="center" class="fluid-
table">
        <tr> 
           <td>
             <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
               <tr>
                 <td>
               <!-- ALL CONTENT STARTS HERE -->
                <tr>
              <td align="right" style="font-weight:normal; vertical-align:middle; color:#6a6a6a; font-size: 11px;">
                If you are unable to see this message, <a target="_blank" style="color:#162249; text-decoration: none;" href="{view_url}"> click here to view</a>
              &nbsp;</td>
            </tr>

                              <!-- HERO HEADER START -->




 <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" background="http://placekitten.com/g/480/300" style="max-width:600px;">

                <tr>
                <td align="center" valign="middle" style="padding: 50px 0;"><a href="https://www.leafly.com/"><img src="https://d3ix816x6wuc0d.cloudfront.net/public/images/logos/leafly-logo-dark.png" style="max-width: 200px;" class="fluid-image"/></a></td>    
                </tr>
 </table>
 <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
                <tr>
                <td align="center" valign="middle" bgcolor="#f4f4f4" bordercolor="#a5a5a5" style="font-size: 15px; color: #99958d; line-height: 30px; font-family: Helvetica, Arial, sans-serif; border-top: solid 1px #a5a5a5; border-bottom: solid 1px #a5a5a5; padding: 0 10px" width="100%"> WELCOME TO THE WORLD'S CANNABIS INFORMATION RESOURCE</td>  
                </tr>
                <tr>
                <td align="center" valign="middle" style="font-size: 14px; color: #000000; font-family: Helvetica, Arial, sans-serif; padding: 23px 0;" width="100%"> Now that you're subscribed to Leafly news,<br>
we'll be sure you're in the know about the latest cannabis strains,<br> 
deals nearby, legalization news, events, culture, and more.</td>
                    </tr>
                <tr>
                <td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                     <tr>
                     <td>
    <table cellspacing="0" cellpadding="0" align="center">
                     <tr>
                     <td bgcolor="#ffffff" style="padding: 14px 11px; -webkit-border-radius:10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 3px #cda581; box-shadow: 0px 5px 10px #b7b7b7; font-family: Helvetica, Arial, sans-serif;" align="center"><a href="https://www.leafly.com/user/sign-up" target="_blank" style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #4a3927; text-decoration:none; line-height: 130%; display: inline-block;">NOW THE REAL FUN BEGINS!<br>
<i>CREATE A LEAFLY</i> ACCOUNT SO YOU CAN...</a>
                     </td>
                     </tr>
    </table>
                     </td> 
                     </tr>
</table>
                </td>
                </tr>
                <tr><td style="padding:15px;""></td></tr>
</table>
<!-- HERO HEADER END -->
<!--BEGIN COLUMNS-->
<!--COLUMN 1-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumns" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>


    </tr>
</table>
<!--COLUMN 1-->
<!--COLUMN 2-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="rtl" class="templateColumns" bgcolor="#f1f2f2">
    <tr>
        <td align="center" valign="top" width="48%" dir="ltr" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" dir="ltr" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!--COLUMN 2-->
<!--COLUMN 3-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumns" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>


    </tr>
</table>
<!--COLUMN 3-->
<!--COLUMN 4-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="rtl" class="templateColumns" bgcolor="#f1f2f2">
    <tr>
        <td align="center" valign="top" width="48%" dir="ltr" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" dir="ltr" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!--COLUMN 4-->
<!--COLUMN 5-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumns" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>


    </tr>
</table>
<!--COLUMN 5-->
<!--COLUMN 6-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="rtl" class="templateColumns" bgcolor="#f1f2f2">
    <tr>
        <td align="center" valign="top" width="48%" dir="ltr" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" dir="ltr" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!--COLUMN 6-->
<!--COLUMN 7-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumns" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <a href""target="_blank"><img src="http://placekitten.com/g/480/300" width="275" style="max-width:275px;" class="columnImage"/></a>
                    </td>
                </tr>
            </table>
        </td>


        <td align="center" valign="middle" width="48%" class="templateColumnContainer" style="padding-bottom: 10px; padding-top:10px;">
            <table border="0" cellpadding="10" cellspacing="0" width="100%" valign="middle">
                <tr>
                    <td valign="middle" class="rightColumnContent" align="center" style="font-family: Helvetica, Arial, sans-serif;">
                    <a href""target="_blank" style="font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #4a3927; text-decoration:
none; line-height: 130%; display: inline-block;">RIGHT TEXT</a></td>
                </tr>
            </table>
        </td>


    </tr>
</table>
<!--COLUMN 7-->
<!--END COLUMNS-->
<!--BEGIN END MESSAGE-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
                <tr>
                <td align="center" valign="middle" style="font-size: 14px; color: #000000; font-family: Helvetica, Arial, sans-serif; padding: 40px 0; max-width:400px;" width="100%"> Please leave us feedback, questions, a sonnet,or virtual high-five!<br>
Thanks again for joining our passionate community,<br> 
and we hope to hear from you soon!
<br><br>
                    <span style="font-size:125%;"><i>Your friends at Leafly</i></span> </td>
                    </tr>
                <tr>
                <td>
                </table>
                <!-- ALL CONTENT ENDS HERE -->
</td>
</tr>
</table></td>
</tr>
</table>                
</td>
</tr>
</table>
</body>
</html>