Hello! I tried creating a simple responsive template for when my company has to send out emails getting people to download Whitepapers. Just a simple title at top, text to the left, image to the right, and everything stacks in mobile. However in Outlook and Gmail on desktop, when the image should be in the upper right section, it is instead stacking down underneath the text as if it were mobile. Can anyone take a look at my code and see what I did wrong? What I should be doing differently?

Here's my code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>

<!-- For development, pass document through inliner -->


<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
}

img[class="fluid"],
img[class="fluid-centered"] {
width: 100% !important;
max-width: 225px !important;
height: auto !important;
margin: auto !important;
}

body,
.body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none; }

a {
color: #ffffff;
text-decoration: none; }

.text-center {
text-align: center; }

.text-right {
text-align: right; }

.text-left {
text-align: left; }



.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important;
}
.container table .responsive-button {

max-width: 200px !important;
align: center;
border-collapse: collapse; }

.container table .main {
width: 100% !important;
max-width: 580px !important;
border-collapse: collapse; }


.container .content {
background: #ffffff;
padding: 30px 35px;
}
.container .content .copy {
background: #ffffff;
min-width:250px;
padding-bottom: 20px;
}
.container .content .paper {
background: #ffffff;
min-width:200px;
padding-left: 15px;
}
.container .content2 {
background: #25265e;
padding: 30px 35px;
}

</style>
<title>Get Your Copy</title>
</head>
<body bgcolor="#efefef">
<table class="body-wrap" border="0">
<tr>
<td class="container" valign="top">
<div align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:18px; color:#999;">Download one of our whitepapers | <a href="http://creative.acbusinessmedia.com/SDC/2016/5092/index.html" target="_blank" style="color:#999999; text-decoration:underline;">View this email online</a></div>

<!-- Message start -->
<table border="0" class="main" align="center">

<tr>
<td class="content2">
<div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#ffffff;"><strong>Optimization in complexity</strong></div>
</td>
</tr>
<tr>
<td class="content">
<table class="copy" align="left" width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:18px; color:#232323;"><strong>Production complications eating into your profits?</strong> Optimize your schedule amid mounting complexity. <br />
<br />
<a href="http://www.sdcexec.com/whitepaper/12278740/production-complications-eating-into-your-profits" target="_blank" style="color:#25265e; text-decoration:underline;"><strong>Download this guide</strong></a> to learn more about how Quintiq Scheduler can help you:<br />
<ul style="padding-left:25px;">
<li>Alleviate resource bottlenecks and improve production output while ensuring the timely completion of every order</li>
<li>Match customer orders to raw materials and optimize material allocation</li>
<li>Track KPIs like delivery performance, production lead time, inventory levels and throughput in real time</li>
</ul>
<br />
<table border="0" cellspacing="0" cellpadding="0" class="responsive-button">
<tbody>
<tr>
<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#ffa100" class=""><a href="http://www.sdcexec.com/whitepaper/12278740/production-complications-eating-into-your-profits" target="_blank" style="font-size: 16px; font-family: Proxima Nova, 'source_sans_proregular',Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #ffa100; display: block;" class="cta">
<!--[if gte mso 9]>&nbsp;<![endif]-->
<strong>Download Today</strong> &raquo;
<!--[if gte mso 9]>&nbsp;<![endif]-->
</a></td>
</tr>
</tbody>
</table>
</div></td>
</tr>
</table>
<table class="paper" align="left" width="35%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="right"><img src="http://creative.acbusinessmedia.com/SDC/2016/5092/brochure.png" alt="Quintiq" width="225" height="318" border="0" style="margin: auto;" class="fluid"/></div></td>
</tr>
</table></td>
</tr>

</table>

</td>
</tr>



</table>
</body>
</html>