This is the result I would like to get once I’m lowering the window: Enter image description here.

The problem with this is that they are not at the center. Once I make them the center, I get the same thing. I think I’m doing something wrong. This code is what causes the problem when it is in the center.

My code is:

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="https://stackoverflow.com/questions/70222635/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 someone can help me with that. Thanks in advance !

Softee is a new contributor to this site. Be careful about asking for explanations, commenting and responding. See our Code of Conduct.