Make img ignore parent padding and sit flush to container edges with negative margin while being responsive

I have a parent div with padding, but I want certain child elements to ignore the padding and sit flush to the container but still be responsive

Things need to be to avoided:

• Adding extra padding div only around children to have padding
• Targeting children separately i.e. .group p, .group li, .group ul, {padding:2vw;}
• Hide any significant part of the image (10px is fine)
• Image positioning being inconsistent (should stay centered)

Using negative margins and overflow:hidden on parent div works, but the results are inconsistent as can be seen by making the snippet full screen on desktop.

Example:###

.group {
  max-width: 700px;
  background: #bf0b30;
  padding: 4vh 3vw;
  color: #fff;
  overflow: hidden;
}

.group img {
  width: 110%;
  margin: -4vh -3vw 5vh;
  max-height:200px;
  padding: 0;
}

figure {
  padding: 0;
  margin: 0;
}

<!-- has padding --><div class="group"><!-- ignore padding --><figure class="figure"><!-- ignore padding --><img class="image" src="https://source.unsplash.com/random" /></figure><h2>My Title</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p><ul><li>Sed do eiusmod tempor incididunt</li><li>ut labore et dolore magna aliqua</li></ul><p>Ut enim ad minim veniam</p><p>quis nostrud exercitation</p></div>

This is different to suggested answer:Ignore parent padding Because the answers are using 10 year old CSS unable to address specific issues I'm asking about.