Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help!
https://i.sstatic.net/V6Rdr.jpg
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"><!--<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
</title>
<style type="text/css">
@media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
font-size:90%;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
table {border-collapse: collapse;}
/* Basics */
body {
margin: 0 !important;
padding: 0;
background-color: #e4e4e4;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
max-width: 100%;
display:block;
height: auto;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
}
a {
text-decoration: none;
}
.more a {
color: white;
text-decoration: underline;
line-height: 2em;
font-family: sans-serif;
}
/*box text content*/
.resort-name{color: #000000; font-size:20px; line-height: 1em; font-family: sans-serif;text-align: center}
.city {color: #615657; font-size:12px;text-align: center}
.rate {color: #758b1d; font-size:20px; text-align: center}
.rate-s {color:#969696; text-align: center}
div.cont table
{
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #e4e4e4">
<center class="wrapper">
<footer>
<table align="center" cellpadding="0" cellspacing="0" style="background-color:#63656b;display:table;" width="600">
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<tr>
<td style="padding:20;">
<blockquote>
<p style="color:#ffffff; font-size:10px; font-family:Arial, sans-serif; text-align:left;">Terms and Conditions:<br>
PROMO CODE: CALI. Valid for new reservations booked between 5/3/2017 - 5/12/2017 for travel from 5/3/2017 - 8/31/2017. Please enter promo code CALI when making your
online booking to receive best available rate. Offer is based on availability and may not be available on all room types, Rates may be higher during holiday/event periods
and weekends. Cannot be combined with other offers and promotions and is subject to change without notice.</p>
</blockquote>
</td>
</tr>
<tr bgcolor="#63656B">
<td colspan="1" rowspan="1" style="padding:20px;color:#000000;">
<table align="center" bgcolor="#63656B" border="0" cellpadding="0" cellspacing="0" style="background-color:#63656B;margin-bottom:10px;" width="600px">
<tr>
<td colspan="1" rowspan="1" style="color:#ffffff;font-weight:normal;vertical-align:top;font-size:12px;font-family:Helvetica, Arial, sans-serif;line-;text-align:center;"
valign="top">
<div style="line-height: 2em; display: inline;">
<center>
<a class="imgCaptionAnchor" href=
"http://r20.rs6.net/tn.jsp?f=001VYiWL5i82Ann9qRcISgE6Vp48wcxwnCtzt3iPLVLHE1Nb2KStjtSlaZpsSubBK-vW90CHuojdBnC8cqIWSmfwEfEosTJw_00x6b3LPt2nIOrLNT6cYshOKU511zD5sDgXwusveQqP6VGDBwGiG1Mv-fBkTEz9VTNaBX1_tVKgEQ7cQjl_S28CQ==&c=&ch="
shape="rect" target="_blank"><img alt="Vacation Resorts International" border="0" height="24" hspace="0" src=
"http://www.8664myvacation.com/eguest/images/vri-logo-footer.gif" vspace="0" width="40"></a><br>
<a href="#" shape="rect" style="color:rgb(255, 255, 255);font-weight:normal;text-decoration:none;">25510 Commercentre Dr., Suite 100<br>
Lake Forest, CA 92630<br>
866-469-8222</a><br>
©2017 Vacation Resorts International
</center>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End 4 Columns -->
<div class="" style="height: 40px; margin:0 auto; background-color: #e4e4e4; width: 100%">
</div>
<!-- spacer -->
</footer>
</center>
</body>
</html>