title: HTML E-Mail gets surrounded by white space (just on mobile)
body: <p>my HTML mails receive a white space around the actualy mail when viewed on mobile clients like the Outlook or GMail App.</p>
  <p>As you can see here there is some white space on each side.</p>
  <p><a href="https://i.stack.imgur.com/9bt8y.png" rel="nofollow noreferrer">https://i.stack.imgur.com/9bt8y.png</a></p>
  <p>In the McDonald's newsletter e.g. this white space isn't there.</p>
  <p><a href="https://i.stack.imgur.com/rVrDh.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/rVrDh.jpg</a></p>
  <p>I would like to know, how I can achieve it, that the white space disappears.</p>
  <p><strong>Edit</strong></p>
  <pre><code>    &lt;head&gt;
      &lt;style&gt;
          body {
              margin:0;
          }
  
          #body {
              color: #848484;
              font-size: 18px;
              line-height: 30px;
          }
  
          #body {
              color:#dd9f33;
              font-size: 18px;
              line-height: 30px;
          }
  
          @media screen and (max-width: 760px) {
              #body {
                  margin: 0;
                  font-size: 25px;
                  line-height: 40px;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; bgcolor=&quot;#ededed&quot;&gt;
      &lt;tr&gt;
          &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;
              &lt;table style=&quot;padding: 23px&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
  
                  &lt;tr&gt;
                      &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;
                          &lt;table style=&quot;border-radius: 50px 50px 0 0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bgcolor=&quot;#ffffff&quot;
                                 width=&quot;600&quot;&gt;
                              &lt;tr&gt;
                                  &lt;td id=&quot;body&quot; align=&quot;left&quot; valign=&quot;top&quot; style=&quot;&quot;&gt;
                                      &lt;div style=&quot;text-align: center;&quot;&gt;&lt;img width=&quot;600&quot; src=&quot;some_image&quot;&gt;&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;
                          &lt;table border=&quot;0&quot; style=&quot;border-radius: 0 0 25px 25px&quot; cellpadding=&quot;15&quot; cellspacing=&quot;15&quot;
                                 bgcolor=&quot;#FFFFFF&quot; width=&quot;600&quot;&gt;
                              &lt;tr&gt;
                                  &lt;td id=&quot;body&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt;
  
                                      Here I have the plain Mail content, simple
                                      div tags
  
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;
                          &lt;table cellpadding=&quot;15&quot; cellspacing=&quot;15&quot; width=&quot;100%&quot; bgcolor=&quot;#ededed&quot;&gt;
                              &lt;tr&gt;
                                  &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>