フッターウィジェット（左・中・右）のような画面の端一杯背景を1カラムの記事中にも使いたい

記事中で画面幅いっぱいに表示するのは簡単なようで難しかったりします。例えるなら、「10階建てのビルのうち4階だけ改装してフロアの面積を広げたい」みたいな感じです。
ただ、すっごいテクニック的なことをすれば可能なので参考までに紹介させていただきます（1からオリジナルのテンプレート作る方が楽かもしれませんが）。

まず、その部分を次のようなHTMLにします。

<div class="alignfull">
  <div class="alignfull-inner">
     中身  
  </div>
</div>

そのうえで次のようなCSSを指定します。

/* ここで無理やり画面いっぱいに広げる */
.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: 100vw !important;
  background: #EFEFEF; /* 背景色 */
}
.alignfull-inner {
  max-width: 920px; /* 中身の幅 */
  margin: 0 auto; /* 中身を中央寄せ */
  padding: 2.5em 1em; /* 中身の余白 */
}

細かい調整などはCSSがある程度書けないと難しいかもしれません・・・。
よろしくお願いします。

お忙しいところご返信頂き、またとてもわかりやすくご教授いただきましてありがとうございます。
そして、幅一杯に調整するのは難しいのですね…。

サルワカさんに教えて頂いたコードにてデザインさせていただきました！
幅一杯に表示されたのですが、左側に余白が発生してしまいました…。

こちらの原因についてご教授頂けたら幸いです。
度々で申し訳ございませんがよろしくお願い致します。

ご理解いただきありがとうございます！
おや、本当ですか…
どこかのページで問題が発生している状態にしていただき、そのURLを教えていただくことは可能ですか？

サルワカさん、お忙しいのに度々申し訳ございません。

「トップページ用1カラム（タイトル出力なし）」でページを作成すると、左側に空欄が寄ってしまう事がわかりました。

1カラム表示（サイドバー無し）であれば、問題なく表示されました！

トップページ用１カラムで利用したいと考えておりましたm(_ _)m
お忙しいところ申し訳ございませんがもし可能であれば改善方法をご教授いただきたく思います。

なるほど！そういうことですね。
調べたところ、さきほどのCSSにくわえて以下のCSSも追加しておくと、トップページ用1カラムテンプレートでもズレがなくなるのではないかと思います。

.page-template-page-forfront #inner-content {
    display: block;
}

よろしくお願いします！

サルワカさん、何から何まで教えて頂き本当にありがとうございました。
無事に表示される事ができました。

今後ともよろしくお願い致します。
お忙しいところ、ありがとうございました。

うまくいったようで良かったです！
丁寧なご報告ありがとうございました。