title: padding-right or margin-right for content that exceeds page width (body/viewport)
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;style&gt;
          body {
              margin: 0;
              padding: 3em;
              height: 100%;
              overflow: auto;
          }
          #content {
              width: 200em;
              height: 4em;
              background-color: #dcdcdc;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The content width expands beyond the width of the page/viewport after getting data. I want to show some margin/padding at the right side of the page. </p>
  
  <p>I have tried quite a few things - floats, positioning, BFC etc.</p>
  
  <p>How can I get some white space to the right of the <code>#content</code> ?</p>