My h1 class:"title" doesn't appear to be center even though div is margin:auto. How do I fix this?

I set my div to be margin:auto and the h1 inside should be center but it is not. I do not know how to correct it and I have tried different things but none of them work. Please work. It does not appear center.

 </header>
  <section>
   <div class="title">
  Brainstorm
  </div>
 </body>


 }
 body {
 background: #5D6D7E;
 color: white;
 font-family: "Varela Round",sans-serif;
  margin: 0;
 padding: 0;
}
header {
 background: white;
 color: #3498DB;
 }
 ul {
 list-style-type: none;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
color: #D7DBDD;
font-weight: bold;
}
 a:hover {
 color: white;
 }

 section {
  display: flex;
flex-direction: row;
}
 div {
 width: 100px;
 margin: auto;
}
.title { /* Doesn't appear to be center  */
font-size: 50px;
}
header, section {
background: #2E86C1;
 }
 header, section, footer {
 padding: 20px;
 }