『人気記事』『新着記事』の文字の両側にボーダーラインを挿入したい

HTMLを下記のようにして

<p class="center strong top-title"><span><i class="fa fa-paw"></i> 人気記事</span></p>

CSSを

.top-title {
    position: relative;
    margin: 0 1.5%;
}
.top-title:before {
    position: absolute;
    content: '';
    border-bottom: 2px solid black;
    top: 50%;
    left: 0;
    z-index: -1;
    width: 100%;
}
.top-title span {
    font-weight: bold;
    color: #4d4b4b;
    font-family: Quicksand,sans-serif;
    display: inline-block;
    padding: 1em;
    letter-spacing: .05em;
    font-size: 17px;
    background: #f0ebeb;
}

とすれば、できるかなと思います。
以前もお伝えしておりますが、本来であれば、「◯◯にしたい」というカスタマイズの方法を教えることまではサポートしていないので…。
（「◯◯のように◯◯したい」という1件の要望に対応するのには時間がかかりますし、対応し出すとキリがないので、ご理解頂けると幸いです）

カスタマイズ参考にさせていただきました。
SPだとキレイに表示されるのですが、PCだとボーダーラインが記事２列よりはみ出してしまいます。
（メインコンテンツの幅が記事２列より広いためだと思われます）

お手すきの際で構いませんのでご教示いただけますと幸いです！

サルワカさん、お忙しいなかありがとうございました m(_ _)m それからカスタマイズの件、ご迷惑おかけ致しました。

カードタイプで確認してみましたが、PCでも問題なく表示されておりました。
横長の記事一覧レイアウトをご利用ですか？
可能であればURLを教えて頂ければと思います。

いえ、融通が利かなくて申し訳ないです。
どうしても今は細かな+αのサポートまでは手が周らないので、ご容赦頂けると幸いです。

こちら綺麗に表示することができました！
ありがとうございます。
（いつも丁寧にご対応いただき、本当にテーマを買ってよかったと思います！）

コメントありがとうございます。
カードタイプを利用しております。
こちらご確認お願い致します。
https://takekoputa.net/

なるほど。下記のCSSを追加して見て頂けますか？

@media only screen and (min-width: 1030px) {
  #main .top-title {
      margin: 0 6% 0 0px;
  }
}

※ 追加後はキャッシュの削除をお願いします