How can I center my image + text and keep responsive? - html

Question

here's the result I'd like to obtain once I'm reducing the window :
the problem in this result is that they aren't centered, once I center them that's what I get, I guess I'm doing something wrong : the issue. This code is the one that cause the issue when they're centered.
Here's my code :
section {
margin-top: 25px;
padding: 24px;
box-sizing: border-box;
}
h2 {
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 15x;
}
.flex-container > div{
position: relative;
left: 21%;
border-radius: 5px;
padding: 8px;
}
.articleactu img {
float: left;
border-radius: 15px;
max-width: 210px;
}
p {
word-wrap: break-word;
max-width: 900px;
padding-left: 200px;
}
#titre {
line-height: px;
font-weight: bold;
}
#date {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
position: relative;
left: 21%;
width: 50%;
opacity: 12%;
}
div p ,#titre ,#date {
margin-left: 35px;
}
<!-- ACTUALITÉ - ARTICLES -->
<section>
<h2> L'ACTUALITÉ </h2>
<article class="articleactu">
<div class="flex-container">
<div>
<img src="images/gtaarticle.jpeg" alt="Article GTA " class="center">
<p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
<p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
<p id="date"> Publié le 27 novembre 2021 </p>
</div>
<hr class="solid">
<div>
<img src="images/bf2042-2.jpg" alt="Article GTA " class="center">
<p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
<p> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
<p id="date"> Publié le 26 novembre 2021 </p>
</div>
<hr class="solid">
</article>
</section>
I hope that anyone can help me with this. Thanks in advance !

Answer 1

The main reason is
.flex-container > div{
left: 21%;
}
Then, that div has full width(100%) but the left position has 21%. So the content will look on the left side.
Try like this.
section {
margin-top: 25px;
padding: 24px;
box-sizing: border-box;
}
h2 {
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 10%;
}
.flex-container > div {
display: flex;
}
.flex-container > div > div {
float: left;
}
.description {
margin-left: 20px;
}
.articleactu img {
border-radius: 15px;
max-width: 210px;
}
p {
word-wrap: break-word;
}
#titre {
line-height: px;
font-weight: bold;
}
#date {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
position: relative;
width: 50%;
opacity: 12%;
}
your HTML
<section>
<h2> L'ACTUALITÉ </h2>
<article class="articleactu">
<div class="flex-container">
<div style="display: flex">
<div>
<img src="images/gtaarticle.jpeg" alt="Article GTA " class="center">
</div>
<div class="description">
<p id="titre">GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus !</p>
<p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus...</p>
<p id="date"> Publié le 27 novembre 2021 </p>
</div>
</div>
<hr class="solid">
<div>
<div>
<img src="images/bf2042-2.jpg" alt="Article GTA " class="center">
</div>
<div class="description">
<p id="titre">BATTLEFIELD 2042 : De très mauvaise notes pour le nouvel opus.</p>
<p> Le lancement du jeu est malheureusement un raté... Un jeu rempli de bugs, on repense évidemment à Cyberpunk 2077...</p>
<p id="date"> Publié le 26 novembre 2021 </p>
</div>
</div>
<hr class="solid">
</div>
</article>
</section>