Text in div has background color

Question

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

Thank you

.category {
        background-color: brown;
        width: 350px;
        height: 100px;
    }

    .category h2 {
        text-align: center;
    }

<div class="category">
   <h2>Rain</h2>
</div>