title: Text in div has background color
body: <p>If I put a text element in a div element, the text shows another background color than the div element. Bellow is a picture and the code</p>
  <p>Thank you</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>.category {
          background-color: brown;
          width: 350px;
          height: 100px;
      }
  
      .category h2 {
          text-align: center;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="category"&gt;
     &lt;h2&gt;Rain&lt;/h2&gt;
  &lt;/div&gt;
  
      </code></pre>
  </div>
  </div>
  
  <a href="https://i.stack.imgur.com/svgnu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/svgnu.png" alt="enter image description here" /></a></p>