Center html text with a bottom border

index.html

<div class="slogan">
    <h1>Developing Interactive User Interfaces</h1>
</div>

styles.css

.slogan {
  text-align: center;
}

.slogan h1 {
  display: inline-block;
  border-bottom: 6px solid;
  padding-bottom: 5px;
  margin: auto;
}