Html Email outlook responsive - html

Question

I'm trying to create Html email, in other email clients my layout looks great and responsive but when I check in outlook I have just one column instead of two columns, I tried to do a conditional statement for Microsoft Outlook, but no result, I get only one column, here is my code HTML, what I'm doing wrong, please?
/* styling */
.two-col{
text-align: center;
padding: 10px 0;
width: 100%;
font-size: 0;
}
.col{
display: inline-block;
width: 100%;
max-width: 300px;
margin-bottom: 5px;
vertical-align: top;
}
.padding{
padding: 25px;
}
.content{
font-size: 15px;
text-align: left;
}
<tr>
<td>
<table role="presentation" width="100%">
<tr>
<td class="two-col">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300">
<![endif]-->
<table role="presentation" class="col">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsPinch.png" alt="Hands Pinch">
</td>
</tr>
<tr>
<td>
<h2>
Customize this email template!
</h2>
<p style="line-height: 24px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.
</p>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300">
<![endif]-->
<table role="presentation" class="col">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsGive.png" alt="Hands Give">
</td>
</tr>
<tr >
<td>
<h2>Customize this email template!</h2>
<p style="line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.</p>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now">
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>

Answer 1

The columns are probably just-so-slightly larger than 300 each since you have not zeroed every <table> (e.g. <table role="presentation" class="col">)
Ensure every table has minimally the following: <table role="presentation" cellspacing="0" cellpadding="0" border="0">