html - Adding Horizontal line Below The Text Like In the Image? -

code, need add horizontal border in image

<section class="about">     <div class="container">         <h1 class="text-center">the resturant</h1>         <h3 class="text-center">a little , brief history of   how   started</h3>         <div class="about-border"></div>     </div>  </section> 

try

.about-border {     display: block;     width: 80px;     height: 3px;     background: #f1cd8f;     margin: 20px auto; }  /* optional css center align heading text*/ .about h1, .about h2 {    text-align: center; } 

fiddle: https://jsfiddle.net/9oapmz9b/