こちらの画像も添付します。

前略、JUNICO さん

よくわからないのですが、アピールエリアの幅を画面幅いっぱいではなく、限定されていらっしゃるようですので、

#appeal {
   height: calc(100vw * 0.2);
}

は、やめて、

#appeal {
  height: 244px;
}

@media screen and (max-width:640px) { 
  #appeal {
    height: 150px;
  }
}

このように、固定値になさっては、いかがでしょうか？

JUNICO さん

あと、Cocoon設定の「ヘッダー」タブの中の設定で、「高さ（モバイル）」のところの数値も、モバイル表示のときの空きに、関係しているかもしれません。

JUNICO さん

Cocoonはデフォルトでは、ヘッダー部やアピールエリアは画面幅いっぱいに表示されるような気がするのですが私の知らないスキンがある？のか、カスタマイズなどをされていらっしゃるのか、よくわからないため、上記のように書かせていただきました。

もし、望まずして今のように、ヘッダーやアピールエリアの幅が限定されてしまっている、ということでしたら、また話は違ってくるかと思われます。

その辺りのことは、ご本人しかわからないので、何とも言えないところです。

リフィトリーさん

早速ありがとうございます！
教えていただいたコードを入れたらウィンドウを広げても空白がひろがる様なこともなくなりました！見え方はこれで私の理想系です！

モバイルのヘッダーの高さの方も空白をなくそうと思いし他のですが
突然cocoon設定全てのタブが保存を押すと全て添付画像の様なページになってしまい、何も設定を変更できない様になってしまいました。

これは、何をしたらいいのでしょうか？?

JUNICO さん

おそらく、レンタルサーバーのWAFのセキュリティーに引っかかっているのだと思います。

一旦、WAFをOFFにして、試してみるといいかもしれません。

自分の作業をWAFの除外リストに登録することもできるような事が書いてあるので、そうなのかもしれません。

作業後は、ONに戻しておく方が良いと思います。

WAFの詳細な設定等は、レンタルサーバーのサポートにお尋ねになってください。

WAFの設定をする

（ちなみにヘッダーやアピールエリアの幅は意図的に幅が広がらない様にしました！
こじんまりした淡々とした静かな感じ？を出したかったので。
コードが全くわからないのでいろんな人のカスタマイズのをごちゃごちゃにくっつけてみたり出来上がったのが今の感じです。）

JUNICO さん

ちなみにヘッダーやアピールエリアの幅は意図的に幅が広がらない様にしました！
こじんまりした淡々とした静かな感じ？を出したかったので。

やはり、そうでしたか。

意図どおりに上手くいっていると思います。（余白が効果的だと思います。）

モバイル表示のヘッダー高さの数値を消すか、少ない数値にすれば、よいのではないかと推測しています。

リフィトリーさん

WAFをオフにしたらエラーページも無くなって、
モバイルの高さも変えたら余白も少なくすることができました！！
これで完璧です！

本当に本当に丁寧にありがとうございます！mmmm