title: CSS not showing in outlook
body: <p>I have an email template:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              #outer_content {
                  background-color: #F7F7F7;
                  border: 1px solid #E4E4E4;
                  width: 100%;
                  height: 100%;
              }
  
              #email_content {
                  max-width: 650px;
                  font: 12px Georgia, "Times New Roman", Times, serif;
                  color: #888;
                  text-shadow: 1px 1px 1px #FFF;
                  margin-left: 25px;
                  margin-top: 15px;
                  margin-right: 25px;
                  margin-bottom: 10px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="outer_content"&gt;
              &lt;div id="email_content"&gt;
                  &lt;h2&gt;New message from {{ user }} ( {{ email }} )&lt;/h2&gt;
                  &lt;p&gt;Message below:&lt;/p&gt;
                  &lt;p&gt;{{ message }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>which displays fine in the browser, but outlook seems to get confused by the margins. I have tried using padding, but that doesn't help. Are there any css tricks I need to know in order to get around these issues?
  <img src="https://i.stack.imgur.com/psqiY.png" alt="enter image description here"></p>