title: How to make the background-color cover the whole div?
body: <p>I am trying to add a background-color to a div that contains two more divs within it. But the background color doesn't stay all the way under the two divs.</p>
  <p>The two divs are inside the div that i added the background to, so I thought the background should end under or beside the two divs.</p>
  <p><a href="https://i.stack.imgur.com/OpyFD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OpyFD.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.characters {
      margin: 0;
      border: 5px solid black;
      float: left;
      width: 50%;
      box-sizing: border-box;
      }
  
      .characters img {
      width: 100%;
      height: auto;
      display: block;
      border-bottom: 5px solid black;
      }
  
      .infos {
      background-color: gray;
      padding: 35px;
      text-align: center;
      }
  
      .infos h2, .infos h3 {
      margin: 0;
      }
  
      .page {
      margin-top: 35px;
      padding: 10px;
      background-color: lightgray;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
      &lt;div class="characters"&gt;
          &lt;img src="pic.jpg" alt="pic" width="100px" height="100px"/&gt;
          &lt;div class="infos"&gt;
              &lt;h2&gt;text&lt;/h2&gt;
              &lt;h3&gt;text&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="characters"&gt;
          &lt;img src="pic.jpg" alt="pic1" width="100px" height="100px"/&gt;
          &lt;div class="infos"&gt;
              &lt;h2&gt;text&lt;/h2&gt;
              &lt;h3&gt;text&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>