image outside of a container section [duplicate] - css

Question

This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Closed 2 years ago.
I have a little problem I can't solve myself.
The whole section is inside such container (need to keep it as I align elements vertically with elements from other sections.
I don't have any issue to display in the right position the image inside this container using Flexbox or grid but as you can see in the illustration I need the image always stick on the right but stay in the same position on the left. It's kind of absolute but when I ad absolute I have an issue with the section above. any ideas?
exemple of behaviour : https://www.bain.com/insights/how-to-give-feedback-on-agile-ideas/
<!-- Title & Category Section-->
<section class="container px-4 mx-auto mt-32">
<div class="grid grid-cols-12">
<div class="col-span-8 col-start-4">
<div class="mb-2 text-sm font-light">{{ range .Params.Categories }}
{{ . | humanize }}
{{ end }}
</div>
</div>
<div class="col-span-8 col-start-4">
<div class="mb-4 text-6xl font-bold"><h1>{{ .Title }}</h1></div>
</div>
<div class="col-span-7 col-start-4">
<div class="mb-10 text-2xl">{{ .Params.Subtitle }}</div>
</div>
</div>
</section>
<!-- Hero Area -->
<div class="container px-4 mx-auto ">
<section class="flex flex-row">
<div class="w-3/12 ">
<div class="text-right">
<div class="mb-6">{{ partial "posts/published-date.html" . }}</div>
<div>{{ partial "posts/modified-date.html" . }}</div>
</div>
<div class="text-right">
{{ partial "posts/reading-time.html" . }}
</div>
</div>
<div class="r-9/12">
{{ partial "posts/post-hero.html" . }}
</div>
</section>
</div>
<!-- Article In Brief-->
<!-- Article main content -->
<section class="container px-4 mx-auto">
<div class="grid grid-cols-12">
<div class="">
<!-- Audio Player -->
<div class="">{{ with (eq .Params.Audiopost "") }}
<p>nothing to display</p>
{{ else }}
{{ partial "audio.html" . }}
{{ end }}
</div>
<div class="mt-3 ml-1">
<p class="text-xs">Audio</p>
<p class="font-bold">Listen to the article</p>
</div>
</div>
<div class="col-span-9 col-start-4">
<article class="prose lg:prose-l">
{{ .Content }}
</article>
</div>
</div>
</section>
{{ end }}
and image :
<img src="{{ .Params.Image | absURL }}" alt="{{ .Title }}" loading="lazy" class="absolute">
{{ else }}
<p>pas d'image</p>
{{ end }}

Answer 1

Just Do this
.container {
position : relative;
right : 0;
}
This will make that container align Right . hop this works ..
and Elaborating your problem more will help us to fix your doubt