I want to underline my element finitely while keeping it in center of the page using text-align: center. However, using border-bottom(for underline) and text-align: center at the same time, the underline goes on till the end of the page. Is there any other way I can achieve this?
Hope you understand my issue. Thanks in advance.

  h1 {
  text-align: center;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  border-bottom: 4px double black;

<h1>Heading Text</h1>

Kalpana Chawla is the content of my element. As you can see, the underline starts well before ‘K’ and ends afar from ‘a’. I want the underline to start just from K’ and end at ‘a’ while keeping the heading in the center.

>Solution :

i hope this is you are looking for,
use text-decoration: underline

h1 {
  text-align: center;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  text-decoration: underline double;
  }

<h1>Heading Text</h1>