Q:

Media Queries alignment in email

I am trying to create a responsive two-column row (in a table) using media-queries for an email.  The left-column is currently aligned to the left and right-column is currently aligned at the center.  I want the left-column to be center when seen on a mobile-device, and the right column kept at the aligned center state.  The right-column will start a new row.  
Here is a part of my code:
`<style>
@media only screen and (max-width: 40em)  {
.deviceWidth {width:100%!important;float:center!important;}                  
 table, thead, tbody, tfoot, th, td, tr {display:block!important;}  
.header{width:100%!important; display:block!important; align:center!important;}
        }       
</style>

<table cellpadding="0" cellspacing="0" width="100%" style="border-top:1px solid #e5e5e5; text-align:center;" class="deviceWidth">
<tr>
<td class="header" width="50%" align="left">
    <img src="" />
</td>
<td class="header" width="50%" align="center" style="padding:5px; font-family:Arial,Helvetica,sans-serif; font-size:11px; color:#000000">
     Text
</td>
</tr>
</table>`

Does anyone know why the left-column isn't responsive to the center

A:

If you take the aligns off both cells, they'll center just fine. 
You don't need to define alignment on cells unless specifically playing with reverse ordering when going to mobile. 
BUT looking at your code, you wish to have the content inside of the left aligned cell to be aligned to the far left as well, whereas the content inside the right is centered. 
I would suggest wrapping the content inside of the left aligned cell in a table and left aligning the cell inside of that.