horizontal center div's with a absolute position - html

Question

I have 3 divs inside a section. The divs position is absolute because I want a really small gap between the 3 divs, but when I want to horizontal the divs nothing happens. What should I do?
#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
}
<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>

Answer 1

Make a parent div with a relative positioning rule. Like this:
#blabla {
position: relative;
}
Indicate the margin: auto for each card - #columnL, #columnM and #columnR.
And push the width: 100% for the img tag. Like this:
img {
width: 100%;
}
But why do you need absolute positioning?
#blabla {
position: relative;
}
#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
margin: auto;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
margin: auto;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
margin: auto;
}
img {
width: 100%;
}
<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>
Solution with flex and absolute positioning.
The absolute in this solution is an additional parent block, with a class of .absolute, as well as a flexible rule that sets the indentation by the gap rule.
#blabla {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
gap: 30px;
}
#columnL {
width: 412px;
height: 705px;
}
#columnM {
width: 412px;
height: 705px;
}
#columnR {
width: 412px;
height: 705px;
}
img {
width: 100%;
}
<section id="blabla">
<div class="absolute">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</div>
</section>