やりたい事としては、CTAの部分に来た時に、横幅背景いっぱいにデザイン？を入れることと、

同じmain領域内にあるので同じにはできないと思いますよ。

クーンのウィジェットにCTA見出しの部分があると思いますが、区切りのいい所で改行？をしたいと考えております。

現状バズ部と同じタイトルにしているので微妙で、実際どのような文字列にするかをチェックしないと現状のままだと回答しにくいです。

強いていうのであれば、

• タイトル部分クラスcta-heading領域の幅を（メディアクエリ毎に）指定
• word-break: keep-all;　を使って改行点を与える。そのために文字列にスペースを入れる
• marginで横幅をautoにして中央揃え
• 文字列のセンタリングが必要であれば、 text-align: center;を。

.cta-heading {}　に上記スタイルを入れて調整すればイケそうです。

イメージ図

https://gyazo.com/276011ac92566ae0868d18b53d08cb60

改行点を入れたイメージ図

https://gyazo.com/3e037be79170e70f718ddb709d62a989

かうたっくさんご回答ありがとうございます。

なるほど、main領域にあるのでできないのですね。やるとしたら、新たなプラグインを入れるなどになるのでしょうか？よく分かっていなくてすみません。

文字列に関しては、

無料EBook：ENGLISHMA PEACE IS（ここで改行したい）
合格６０%1日10分の英語のマニュアル

このようにしたいと考えております。よろしくお願いいたします。

すみません、上記の画像が分かりにくいので。

添付画像のような感じでいいですか？

もしよろしければ、こんな CSS で可能です。上下の padding 値（48px）は、お好みでご変更ください。

.cta-box {
  background: red;
  margin: 0 calc((100% - 100vw)/2);
  padding: 48px calc((100vw - 100%)/2);
}

.cta-heading {
  max-width: 580px;
}

尚、「合格６０％」の６０を半角にする必要があります（580px は、半角にした上での指定）。

タイトルの文字に関しては、「CTA見出し」に「無料EBook：ENGLISHMA PEACE IS」のみを書く。「合格60%1日10分の英語のマニュアル」は、「CTAメッセージ」に書くのでもいいと思います。画像は「CTA画像」に設定せず、「合格60%1日10分の英語のマニュアル」の下に img タグで書くと、現在と同じ見た目になるはずです（別途 CSS の指定は必要だけど）。

なるほど、main領域にあるのでできないのですね。やるとしたら、新たなプラグインを入れるなどになるのでしょうか？よく分かっていなくてすみません。

親領域のCSSを変更すればイケなくない。って直後に思いました。

あとバズ部のコピペではなく、はじめから希望の形を書いてください。※私がチェックした時間がムダになったじゃないですか＾＾；

もっ！ ? ? ? 

って冗談です。

ってか、ちょっとホントの事でした（笑 ? ? ? 

Akiraさんありがとうございます。早速やってみました。

CSSで背景画像も設定して、現在この状態です。

  background-image:url( );    

かうたっくさん、お手数おかけしました。

今後気を付けます。すみませんでした。

.cta-box {
  background: url( http://www.googol.cfbx.jp/wp-content/uploads/2019/08/bg.png );
  margin: 0 calc((104% - 100vw)/2);
  padding: 48px calc((100vw - 100%)/2);
  color:#333;
}

.cta-heading {
  max-width: 580px;
  font-size: 32px;
  text-align: center;
  color:#333;
  border-bottom: 1px dotted #ddd;
  margin: 0 auto 0.2em;
}

こんな感じか。

かうたっくさんありがとうございます。

早速変更して、ほぼイメージ通りになりました。

お聞きしたいのですが、.cta-boxのmargin: 0 calc((104% - 100vw)/2);の所を、104%にしているのですが、この数字を103以下にすると、画面の下にスクロールバーが表示されてしまいます。それを防ぐために、104%か103%にしている状態です。

この数字は、前後のCSSのことを考えると間違いなのでしょうか？

Akiraさんが書いて下さったように、margin: 0 calc((100% - 100vw)/2);にすべきなのでしょうか？問題が無いようであれば、103%にしたいと考えております。

この数字を103以下にすると、画面の下にスクロールバーが表示されてしまいます。

スクロールバーは出ません。

その 100% は、.cta-box の親要素の幅です。その幅を 103% や 104% にすると、左右に余白が生まれ、CTA部分が画面いっぱいに広がりません。

広げたくない場合には、103% でもいいと思います。もしくは、こんな CSS でも構いません。これで左右に 20px ずつの余白が生まれます。

.cta-box {
  margin: 0 calc((100% - 100vw + 40px)/2);
}

尚、margin と padding は連動しています。103% にする場合には、padding の 100% も変更しないと不格好になっちゃいます。

.cta-box {
  background: url(  http://www.googol.cfbx.jp/wp-content/uploads/2019/08/bgs.png  );
  margin: 0 calc((100% - 100vw + 20px)/2);
  padding: 48px calc((100vw - 100%)/2);
  color:#333;
}

paddingとmarginの左右を103%にされてたけど、スマホで横揺れしてました。

PCのスクロールはユーザーは気にしないけど、スマホの横揺れはユーザーが気持ち悪いと思うじゃないかと思います。

って事で、あやふやな%の表示ではなく、20pxと入れて左右の横幅を狭くした感じです。

Akiraさんありがとうございます。

上記の、
.cta-box {
margin: 0 calc((100% - 100vw + 40px)/2);
}

を試しましたが、思ったより横幅が開いた印象になったので、もう一つの、

.cta-box {
background: url( );
margin: 0 calc((103% - 100vw)/2);
padding: 48px calc((100vw - 103%)/2);
color:#333;
}

こちらを試しました。

この書き方にすれば、連動しているという解釈でよろしいでしょうか？

かうたっくさん、スマホの横揺れまでありがとうございます。

早速試させていただきましたが、103%にするよりも、かなり良い感じな気がします。

今後、CTAをカスタマイズされる方のために、自分が教えていただいた、CSSを書いておきます。

.cta-box {
background: url( );/* 背景を画像にする場合 */
background: red;* 背景色にする場合 */
margin: 0 calc((100% - 100vw + 20px)/2);
padding: 48px calc((100vw - 100%)/2);
color:#333;/*文字色*/
}

.cta-heading {
max-width: 580px;
font-size: 32px;/*タイトルの文字大きさ*/
text-align: center;/*中央寄せ*/
color:#333;/*文字色*/
border-bottom: 1px dotted #ddd;/*タイトル下に線*/
margin: 0 auto 0.2em;
}

かうたっくさん、Akiraさん、大変ありがとうございました。

補足

前提として。
該当投稿ページ（管理画面のサイドにある）『ページ設定』で1カラムを選択。

該当ページのみ反映させたい場合。
カスタムCSS（管理画面、該当投稿ページのエディタ下にある）に書き込めばOKです。

皆さん、お疲れさまでした❦