Hey folks, I have a question.
I have a table structure in which a table is divided into two halves using a percentage of 50% each. Everything looks to be equally proportioned, EXCEPT for a sliver of the main table’s background color showing through - between the two tables. I’ve exhausted the Google Chrome inspector tool to find out the problem and I can’t seem to solve it!
See screenshot here:
HTML Code here (section of importance):
<!--start of html email-->
<table width=100% border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--start of container-->
<table class="container" width="600px" align="center" cellspacing="0" cellpadding="0" border="0">
<!--start of header row-->
<tr>
<td>
<!--start of left column-->
<table class="header-left" width="50%" align="Left" cellspacing="0" cellpadding="0" border="0" style="background: rgb(101,255,253); background: -moz-linear-gradient(-45deg, rgba(101,255,253,1) 0%, rgba(34,150,238,1) 100%); background: -webkit-linear-gradient(-45deg, rgba(101,255,253,1) 0%,rgba(34,150,238,1) 100%); background: linear-gradient(135deg, rgba(101,255,253,1) 0%,rgba(34,150,238,1) 100%); padding: 15px 15px 75px 15px;">
<tr>
<td style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: white;"><img src="https://s15.postimg.cc/oo83ajx8b/logo.png">
<h2 style="padding: 25 0 10px; font-size: 30px; margin: 0; font-weight: 300; line-height: 1 padding: 0 0 10px">Get ready for</h2>
<h1 style="font-size: 80px; margin: 0; line-height: 1;">HERO</h1>
<p style="font-style: italic; font-size: 14px; margin: 0; line-height: 1.5em; padding: 20px 0 50px;">It seems like hundreds of new iWatch apps pop up every week, but which ones should you bother trying?</p>
<a href="#" class="ghost-btn" style= "font-size: 12px;border-radius: 3px; border: 2px solid white; text-decoration: none; color: white; padding: 15px 15px; text-transform: uppercase;">Learn more</a>
</td>
</tr>
</table>
<!-- end of left column -->
<!--start of right column-->
<table class="header-right" width="50%" align="Right" cellspacing="0" cellpadding="0" border="0" style="background-color: white">
<tr>
<td style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #7d7d7d;">
<table class="links" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="padding: 10px;">
<tr>
<td align="center">
<a href="#" style="font-size: 14px; font-weight: 600; text-decoration: none; color: #7d7d7d;">About</a>
</td>
<td align="center">
<a href="#" style="font-size: 14px; font-weight: 600; text-decoration: none; color: #7d7d7d;">Career</a>
</td>
<td align="center">
<a href="#" style="font-size: 14px; font-weight: 600; text-decoration: none; color: #7d7d7d;">Contact</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="bottom" style="padding-top: 7px">
<img src="https://s15.postimg.cc/4gz8wdmob/smartwatch.png" style="position: relative; bottom: -2px;">
</td>
</tr>
</table>
<!--end of right column-->
</td>
</tr>
<!--end of header row-->