I'm working on a responsive hero section for a website, and I'm having trouble achieving the desired layout. I want the hero section to contain two child elements: a left child and a right child, both responsive. The left child should take up one-third of the container, while the right child should occupy the remaining space. Additionally, the background image of the right child should be aligned to the right side of the entire viewport width.
In this visual example I’ve added section, because .c class is causing this effect to every section (max-width: 1188px, mx-auto, margin-left and margin-right: 0)
This is what I'm searching for:
To provide some context, this hero section is implemented in PHP and styled with CSS. Below is the current code I have:
<div class="hero">
<div class="c mx-auto">
<div class="hero__grid d-grid">
<div class="hero__content h-100 d-flex">
<!-- Left Child Content -->
<!-- ... -->
</div>
<div class="hero__img-wr pos-rel h-100 w-100">
<div class="hero__img-content hero_img">
<!-- Right Child Content -->
<!-- ... -->
</div>
</div>
</div>
</div>
</div>
My challenge is extending the right child (.hero__img-wr) beyond the max-width of the container (.c) and sticking its background image to the right-bottom corner of the view. I want the right child to extend beyond the max-width of the container while aligning its background image to the right-bottom corner of the entire section.
How can I modify the CSS and HTML to achieve this layout? Any help would be greatly appreciated.
