title: How to put borders closer to the text and image and make background gray in CSS?
body: <p>This is what I've done:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #d92626;
    color: white;
  }
  body {
    border-left: 5px solid black;
    border-right: 5px solid black;
    padding: 50px 50px;
  }
  .test {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h1 align="center"&gt;
          My text
      &lt;/h1&gt;
    &lt;h2 align="center"&gt;
          MORE MORE MORE&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;/h2&gt;
    &lt;img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I now move left and right border closer to the text and image, and then make the background between left and right border gray?</p>