Hi everyone. Trying hard to get the classic political email two column donate buttons that collapse into full-width buttons on mobile. But for whatever reason, it's breaking in Office 360 and Outlook. In fact, the background color is bleeding into lower sibling elements in Outlook, no idea why! Anyone have suggestions? Here's what I've tried:

<table style="width: 100%;" cellpadding="5px" cellspacing="0" margin="0" align="center" >
<tr>
<th style="display: block;">
<a style="display: inline-block; width: 90%; padding: 10px; background-color: red; color: white;">CHIP IN $10 NOW</a>
</th>
<th style="display: block;">
<a style="display: inline-block; width: 90%; padding: 10px; background-color: red; color: white;">CHIP IN $25 NOW</a>
</th>
</tr>
<tr>
<th style="display: block;">
<a style="display: inline-block; width: 90%; padding: 10px; background-color: red; color: white; ">CHIP IN $50 NOW</a>
</th>
<th style="display: block;">
<a style="display: inline-block; width: 90%; padding: 10px; background-color: red; color: white;">CHIP IN $100 NOW</a>
</th>
</tr>
<tr>
<th style="display: block;">
<a style="display: inline-block; width: 90%; padding: 10px; background-color: red; color: white;">CHIP IN $250 NOW</a>
</th>
<th style="display: block;">
<a style="display: inline-block; width: 90%; padding: 10px; background-color: red; color: white;">ANOTHER AMOUNT</a>
</th>
</tr>
</table>

I'm also using this media query:
@media only screen and (min-width: 605px) {
.content {
width: 704px !important;
}
th{
display: inline-block !important;
width: 40% !important;
}
table {
margin-left: auto;
margin-right: auto;
text-align: center;
}