title: Background color only filling h2 element not its entire div container
body: <p>I have the following div and h2 element below. I'm trying to fill the entire div with a blue color, but instead of filling the entire container2 class like I expect it only fills the h2 section. Why is it doing this and how can I fill the entire container2 section (which has some margin and padding outside the area of the h2?      </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>    h2 {
        color: white;
        font-size: 35px;
        font-weight: 500;
      }
      
      .container2 {
        text-align: center;
        font-family: Carnas-Light;
        background-color: #0f2c4d;
        margin-top: 40px;
        margin-bottom: 40px;
        padding-right: 15px;
        padding-left: 15px;
        width: 83.33333333%;
        margin-left: 8.33333333%;
        height: 100%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container2"&gt;
                          &lt;h2&gt;WorkWave provides intuitive cloud-based field service &amp; fleet management solutions that help organizations with a mobile workforce transform their business.&lt;/h2&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>