title: Align center with media queries (EMAIL CODE)
body: <p>This is email code, hence using tables instead of using lists.</p>
  
  <p>If I change the width of the promo_1-3 to be a fixed number (say 300px) I can get them to align left and right (like the original code at the desktop size) but I can't get them to ignore the originally specified left or right alignment and be centered</p>
  
  <pre><code>@media only screen and ( max-width: 660px) {
          table.container { width: 100% !important; }
          td.logo img { width:100% !important; }
          td.headerimg img{ width: 100% !important; padding: 5px 30px 40px 30px;}
          td.promos table.promo_1 { width: 100% !important; }
          td.promos table.promo_1 td { padding: 20px 20px 40px 30px; }
          td.promos table.promo_2 { width: 100% !important; }
          td.promos table.promo_2 td { padding: 20px 0px 40px 30px; }
          td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }
          td.promos table.promo_3 td { padding: 20px 0px 40px 30px; }
  </code></pre>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;!-- Start story 1 --&gt;     
          &lt;tr&gt;
              &lt;td valign="top" bgcolor="#fff" class="promos" style="padding: 10px 10px 20px 20px; background-color: #fff; font-family: Arial, Helvetica, sans-serif;"&gt;
                  &lt;table class="promo_3" width="300" align="left"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                               &lt;a target="_blank" href="http://trailrunnermag.com/training/training-plans/1860-what-your-weekly-training-plan-should-look-like"&gt; 
                               &lt;img class="promo" alt="Promo image 1" src=    "http://media.campaigner.com/media/47/474810/063016ID3.jpg"&gt;&lt;/a&gt;
                                  &lt;h3 style="font-size:16px;"&gt;Promo heading here&lt;/h3&gt;
  
                                  &lt;br&gt;&lt;br&gt;
                                      &lt;a href="#" style="background-color: #7711AA; border-radius: 5px; color: #fff; padding:5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;"&gt;Learn more&lt;/a&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                   &lt;/table&gt;
  </code></pre>