kyou sam さんがお書きになっている CSS が原因です。完成図が分からないですが、::before や ::after のセレクターが間違ってはいないでしょうか？

例えば、.article h1 に position: relative を指定しています。

.article h1 {
  position: relative;
  /* 省略 */
}

それに対し ::before と ::after の疑似要素は、.article などのセレクターはお書きにならず position: absolute を指定しています。

h1:before,
h1:after {
  position: absolute;
  /* 省略 */
}

position: absolute が指定された要素は、position: static ではない直近の先祖要素に対し相対的に配置されます。トップページの <h1> はサイトタイトルの部分ですので、.article h1 ではありません。そのため、トップページの h1::before や h1::after が意図した位置にないのではありませんか？

h2 や h3 も同様です。サイドバーにある <h2> や <h3> は、.article h2 や .article h3 ではありません。そのため、サイドバーの h2 や h3 の ::before と ::after の位置がおかしくなってはいませんか？

また、transform や calc は、ベンダープレフィックス（-webkit-なんちゃら）は不要です。これらにベンダープレフィックスが必要だったのは 10 年前です。

返信ありがとうございます。まさにその通りで、h1、h2、h3どれも意図した位置にない状況です、

https://saruwakakun.com/html-css/reference/h-design

このページにあったコードをよく分からないままにコピーして流用しています。サイドバーに見出しは不要で、記事だけにh1～3を配置したいのですが、どのようにコードを書き換えればよろしいでしょうか。ご教示ください。

「h1」単体で書かれているところを「.article h1」に変更する必要があります。

h1:before,
h1:after {
  /* 省略 */
}

だったら

.article h1:before,
.article h1:after {
  /* 省略 */
}

といったように変更します。
h2、h3も同様です。

@kyou-sam さん

記事本文内にある見出しのみに CSS を適用させれば解決すると思います。

このようにお書きになっているのを…

h1:before,
h1:after {
  /* 省略 */
}

h1:before {
  left: 7px;
}

h1::after {
  right: 7px;
}

このように .article h1::before などと変更した場合、ご希望に沿うでしょうか？h2 と h3 の ::before と ::after も同様に .article h2::before などと変更します。

.article h1::before,
.article h1::after {
  /* 省略 */
}

.article h1::before {
  left: 7px;
}

.article h1::after {
  right: 7px;
}

※ h1 と書いた場合、全ての h1 が対象です。一方、.article h1 と書いた場合は、class に article がある先祖要素を持つ h1 のみが対象になります。

※ h3 のみ .entry-content h3 とお書きになっています。.article と .entry-content では適用範囲が異なります。.entry-content は本文の部分ですが、.article はもうちょっと範囲が広いです。適切な方をお使いください。

※ 以下の .article と h2 の間のスペースが全角になっていますので、半角スペースへの変更が必要です。

.article　h2 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

わいひらさんとコメントがかぶりました。

解決しました。わかりやすい説明、ありがとうございました。

このフォーラムで記載し忘れていた、別の、見出しの表示に関する問題があるのですが、また別のフォーラムで質問したほうがよろしいでしょうか。

一応、問題点の画像を添付しておきます。

h2、h3見出しが記事の左端に表示されてしまうことです。

@kyou-sam さん

子テーマの style.css にお書きになっている CSS の中に、この部分と…

/* 見出し2 */
.article h2 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

この部分があります。

/*　見出し3 */
.article h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}

それぞれの display: inline-block; を削除すれば解決すると思います。

お二方とも、丁寧な説明ありがとうございました！

また何かありましたら、よろしくおねがいします。