I want to have one <div>( which is inside another <div> ) to have margin/padding equally from all sides as in Screenshot

I want to create a section of my webpage according to attached screenshot. I am able to use margin from left, right side using magin:auto; but not from top or bottom.

HTML:

<div class="main">
<div class="content">
<h2>Book Domestic & International Flight</h2>
</div>
</div>

CSS

.main{
background-color:green;
width:1000px;
margin: auto;
}

.content{
background-color:blue;
}