スマホで、コンテンツ内の画像を画面幅いっぱいに広げたい

お世話になっております。
例えば以前ご紹介した方法ですと、.entry-content .img-fullに対してCSSを適応していますが、セレクターを.entry-content .wp-block-image imgにしていただくと
Gutenbergのブロックとして画像を挿入した場合、その画像だけスマホで画面幅いっぱいになるとおもいます。
Gutenbergのブロックとしての画像以外にも自動的にクラス名を追加してしまうと意図しない画像にCSSが適応される形になってしまうのでこの形が一番良さそうな気がします。
いかがでしょうか？
よろしくお願いします。

返信していただきありがとうございます。

.entry-content .wp-block-image img{
margin-left: -15px;
margin-right: -15px;
}
@media screen and (min-width: 500px) {
.entry-content .wp-block-image img{
margin-left: -25px;
margin-right: -25px;
}
}
@media screen and (min-width: 768px) {
.entry-content .wp-block-image img {
margin-left: 0;
margin-right: 0;
}
}

このように追加CSSの方に記述したのですが、画像が左寄りになってしまい、左側の余白はなくなるのですが、右側に余白ができてしまいます。（https://milami.org/）

そもそもアップロードしている画像のサイズが原因なのかもしれませんが、何か良い方法があったら教えて下さると幸いです。

お世話になっております。
サイトを拝見させていただいたところ想定していた、HTMLの構造と少し違う様です。
画像周りのプラグインを入れていたりしますでしょうか？
試しに以下のCSSを当てていただけないだけないでしょうか？

.entry-content .wp-block-image figure {
  margin-left: -15px;
  margin-right: -15px;
  display: block;
  max-width: none;
}

.entry-content .wp-block-image img {
  width: 100%;
}

@media screen and (min-width: 500px) {
  .entry-content .wp-block-image figure {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (min-width: 768px) {
  .entry-content .wp-block-image figure {
    margin-left: 0;
    margin-right: 0;
    display: table;
  }
  .entry-content .wp-block-image img {
    width: auto;
    max-width: 100%;
  }
}

よろしくお願いします。

画像によっては余白が消えないものもあるのですが、ほとんどの画像の両サイドの余白が消えました！ありがとうございました。

プラグインは
・Easy Table of Contents
・Google XML Sitemaps
・SANGO Gutenberg
の三つしか入れていません。

原因が現時点ではわかりませんが、少し調べてみたいと思います。

そうなんですね。。。
承知しました。
余白が消えたとのことよかったです。
またなにかわかりましたらお知らせいただけると幸いです。
よろしくお願いします。

お世話になっております。
やはり、余白が消えない画像が増えてきました。こちらの記事（https://milami.org/a6000buy/）など。何が原因かを調べる方法などがあったら教えて下さい。一応デベロッパーツールで検証してみてるんですが、原因がわかりません！
何度も質問してしまい、お手数をおかけしています。

お世話になっております。
以前共有させていただいたCSSに加えて以下のCSSもご適応いただけますか？
よろしくお願いします。

.entry-content .wp-block-image > img {
  max-width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
  display: block;
}


@media screen and (min-width: 500px) {
  .entry-content .wp-block-image > img {
    max-width: calc(100% + 50px);
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (min-width: 768px) {
  .entry-content .wp-block-image > img {
    max-width: 100%;
  }
}

返信して下さり、ありがとうございます。
追加CSSの方に、コピペしてみましたが、左側の余白が消え、右側に余白ができてしまうようになりました。

お世話になっております。すみません、以下のコードを追加してみてください。
よろしくお願いします。

.entry-content .wp-block-image > img {
  width: auto;
}

余白消えました！
本当に本当に丁寧に対応して頂きありがとうございました。
今後ともsangoを使い続けます。
本当にお世話になりました。

それは嬉しいです！
今後ともぜひぜひよろしくお願いします！