Your absolutely positioned img.heroForeground has it’s top set to 8vh which will change as the window size changes during resize. This is leading to the unwanted shifting during window resize. Instead, center the element using transform/translate.
div img.heroForeground {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
…
}
Demo
main div.heroBoxContainer {
display: flex;
display: -ms-flexbox;
height: inherit;
margin: 0 auto;
max-width: 1280px;
padding: 0;
position: relative;
z-index: 4;
align-items: center;
}
main div.heroBoxContainer .hGroup {
color: white;
display: block;
height: auto;
margin: 0 0 0 0;
width: 100%;
z-index: 5;
}
div.heroBoxContainer h1.heroHeadline,
div.heroBoxContainer h1.heroHeadline {
font-size: 2rem;
font-weight: 400;
line-height: 2.5rem;
margin: 0 0 0 10rem;
transform: skew(-6deg) rotate(-6deg);
}
div.heroBoxContainer p.subHeadline {
font-size: 4rem;
font-weight: bolder;
margin: 0rem 0 0 10rem;
transform: skew(-6deg) rotate(-6deg);
}
div.heroBoxContainer p.priceHeadline {
font-size: 4rem;
font-weight: bolder;
margin: 0rem 0 8rem 10rem;
color: rgba(255, 220, 58, 1);
transform: skew(-6deg) rotate(-6deg);
}
div img.heroForeground {
position: absolute;
max-width: 80%;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#carousel {
overflow: hidden;
white-space: nowrap;
width: 100vw;
height: 75vh;
position: relative;
}
.slide-image {
width: 100vw;
height: 75vh;
background-position: center;
display: inline-block;
background-size: cover;
position: relative;
}<section id="carousel">
<div class="slide-image" id="slide1">
<div class="heroBoxContainer">
<img src="https://www.cheopstech.cz/wp-content/uploads/2017/06/placeholder-3.png" class="heroForeground">
<div class="hGroup">
<h1 class="heroHeadline">LOREM IPSUM<br> DOLOR SIT AMET</h1>
<p class="subHeadline">LOREM IPSUM:</p>
<p class="priceHeadline">LOREM IPSUM</p>
<a href="/" class="btnCta mobileGetReg triggerGetReg">LOREM IPSUM</a>
</div>
</div>
</div>
</section>