H1 stylized with center border with css

One way to do without overlap is to use pseudo-elementos after and before , follow the example:

h1 {
  text-align: center;
  position: relative;
}
h1:before,
h1:after {
  content: "";
  width: 35%;
  height: 1px;
  background: #555;
  position: absolute;
  top: 50%;
}
h1:before {
  left: 0;
}
h1:after {
  right: 0;
}

<h1>Meu título</h1>

Friend, I do not know if you're talking about the edge of the products, or about that HR next to the highlights. But if it's about the products, it's a simple

border: solid 1px;

The highlights I would do a normal HR, and would place the text inside a div overlapping the HR, using position.

See this example:

link

With position: absolute .

The border is solid , but if you want to put a dash you can use dotted or some image and put it as background-image .

See with fieldset .

link

There is an excellent tutorial on the subject in the following link: Create Headings with Lines in CSS

Of the proposed solutions, my referral is using Flexbox:

h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
h1:before, h1:after {
  background-color: #ddd;
  content: '\a0';
  flex-grow: 1;
  height: 1px;
  position: relative;
  top: 0.5em;
}
h1:before {
  margin-right:10px;
}
h1:after {
  margin-left:10px;
}

<h1>Destaques</h1>

Opa Friend I think what you are looking for is a div to stay around that header

Test, you can put this div on the same background, taking the edges and positioned it above the line, and if you use this title as a link link, p>