wordpress（オリジナルテーマ）の固定ページで、画像を全幅にする方法を教えてください。

Question

実現したいこと

オリジナルテーマで、カフェのサイトを作成しています。
html、css、JavaScriptで問題なく完成したサイトをwordpress化したいです。

前提

固定ページのメインビジュアルはcssで全幅（100vw）に設定しています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

function cafedelune_block_setup() {
add_theme_support('wp-block-styles');
add_theme_support('responsive-embeds');
add_theme_support('align-wide');
}

add_action('after_setup_theme', 'cafedelune_block_setup');

試したこと

①配置＞全幅

上記の様にfunctions.phpで、「align-wide」の指定をし、固定ページを編集する際にブロックの「配置」から「全幅」を選びました。エディター画面では全幅に見えるようになりましたが、プレビューで見ると、wrapper: 1100pxが効いているかのように、左右に余白がある表示となってしまいました。

②カスタムhtmlで直接指定

今度はカスタムhtmで直接style= "width:100%"を指定してみましたが、同じ様に左右に余白ができてしまう結果となりました。

③ カスタムhtml で詳細まで指定

カスタムhtmlの指定をstyle= "width: 100vw"としました。全幅のように幅広い画像となりましたが、右側に大きくずれてしまう結果となりました。そこで、marginやpaddingをゼロに設定したり、margin: 0 auto;にしたり、max-width: 100%と指定してみましたが、やはり全幅で中央配置することができませんでした。

補足情報（FW/ツールのバージョンなど）

昨夜から「固定ページ　全幅」で調べていて、こちらのテラテイルさんだけでなく、色々な方が提案してくださっている方法を試しているのですが、全くうまく行きません。。。

お忙しい中恐縮ですが、どなたかご教示いただけますと幸甚です。

どうぞ、宜しくお願いいたします。

Answer 1

みなさま、お騒がせしてすいませんでした。

「さやっと四苦八苦　Sick Hack」というブログで固定ページの全幅に関して記載してあり、それを試したら解決できました。
解決したコードが下記の通りです。

<div class="wide-section" style="margin:0 calc(50% - 50vw); padding:3em 0; background-color:#d5f2c0;">
<div class="container">
<!-- ここから中身 -->

<figure class="wp-block-image size-large" style="margin:0 calc(50% - 50vw); width:unset; max-width:unset;"><img src="http://cafe-de-lune.local/wp-content/uploads/2023/02/slider2-1.jpg" alt="" style="width:100%; height:400px; object-fit:cover;" /></figure>


<!-- ここまで中身 -->
</div>
</div>コード

こちらのページは数時間前に見つけていて、一度トライしたのですが、その時はうまく行きませんでした。しかし、先ほど再度チャレンジしたらきちんと画像を全幅にすることができました。

みなさま、お騒がせして大変申し訳ございませんでした。
また、何かございましたら、質問させてください。

どうも、ありがとうございました。