用于宣传电子邮件的移动优化容器

Question

我在政治非营利组织工作。我一直在努力为宣传电子邮件开发一个模板，右侧有一个容器，以便快速采取行动。容器在桌面和iOS上看起来很好，但它看起来在droid上超级混乱（容器与左侧的文本重叠）。我试图找出如何移动优化容器，但无法弄明白。我甚至不确定这是否是这样做的最好方法？这是代码：

<div style="width: 200px; height: 500px; background-color: #f89c27; 
text-align: center;" class="container">
<h2 align="center">headline</h2>
<p align="center">text</p>
<a href="website/"><button>Click here to sign</button></a></div>


<style type="text/css">
img {
-ms-interpolation-mode: bicubic; max-width: 100%;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-
serif; -webkit-font-smoothing: antialiased; font-size: 14px; height: 
100% !important; line-height: 1.6em; margin: 0; padding: 0; -ms-text-
size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 100% 
!important;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
div {
float: right;
margin: 2em;
padding: 1em;
}
body {
margin: 0em;
padding: 0em;
}
button {
font-size: 20px;
padding: 8px 20px;
background-color: #A9A9A9; 
}