How to put borders closer to the text and image and make background gray in CSS?
<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>