How to get the text in the box?

[r.sah]

Tell us what’s happening:
Hello dear developers, I’m kind of stucked on a project.
The problem is, I’m coding the text with flexbox and it’s been two days I can’t get the text of my div: conteneur2 staying in its box.

Secondly, I don’t why the icons go up when I get them into a row with flex-direction: row.

Your code so far
```

    <div class="conteneur2">

        <h1>Hébergements à Marseille</h1>

    

        <div class="cannebiere"><img src="./media/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" alt="la cannebiere" ><section class="txt"><h4>Auberge la Cannebière</h4><p>Nuit à partir de <strong>25€</strong></p><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></section>

            

            <div class="port"><img src="./media/hebergements/4_small/fred-kleber-gTbaxaVLvsg-unsplash.jpg" alt=""  ><section class="txt"><h4>Hôtel du port</h4><p>Nuit à partir de 52€</p> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div></section>

            <div class="mouettes"><img src="./media/hebergements/4_small/reisetopia-B8WIgxA_PFU-unsplash.jpg" alt=""  ><section class="txt"><h4>Hôtel les mouettes</h4><p>Nuit à partir de 76€</p><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></section>

            

            <div class="mer"><img src="./media/hebergements/4_small/annie-spratt-Eg1qcIitAuA-unsplash.jpg" alt="" ><section class="txt"><h4>Hôtel de la mer</h4><p>Nuit à partir de 46€</p> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></div></section>

            

            <div class="panier"><img src="./media/hebergements/4_small/nicate-lee-kT-ZyaiwBe0-unsplash.jpg" alt=""  ><section class="txt"><h4>Auberge le panier</h4><p>Nuit à partir de <strong>23€</strong></p> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></section>

            <div class="amina"><img src="./media/hebergements/4_small/febrian-zakaria-M6S1WvfW68A-unsplash.jpg" alt="" ><section class="txt"><h4>Hôtel chez Amina</h4><p>Nuit à partir de 96€</p><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div></section>

            <h3>Afficher plus</h3>

        </div>

                

    <div class="conteneur3">

        <div class="title"><h1>Les plus populaires</h1><i class="fas fa-chart-line"></i></div>

        <div class="soleil"><img src="./media/hebergements/4_small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg" alt="" width="150" height="170"><div class=soleil-txt><h4>Hôtel le soleil du matin</h4><p>Nuit à partir de 128€</p><div class=stars><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div></div></div>

```html

<style>
.container {
  font-size: 1.5em;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  grid-template-areas:
    "advert header"
    "advert content"
    "advert footer";
}
.item1 {
  background: LightSkyBlue;
  grid-area: header;
}

.item2 {
  background: LightSalmon;
  grid-area: advert;
}

.item3 {
  background: PaleTurquoise;
  grid-area: content;
  /* Only change code below this line */


  /* Only change code above this line */
}

.item4 {
  background: lightpink;
  grid-area: footer;
}

.itemOne {
  background: PaleGreen;
}

.itemTwo {
  background: BlanchedAlmond;
}

</style>

<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
  <div class="itemOne">paragraph1</div>
  <div class="itemTwo">paragraph2</div>
</div>
<div class="item4">footer</div>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

The link to my project if the code is hard to read

R-labz/Openclassrooms-project

[r.sah]

The CSS is not the good one actually, here it is:

.conteneur2 {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 width: 65vw;
 height: 100%;
    background-color: #f2f2f2;
    border-radius: 15px;

}

.conteneur2 h1 {
    padding-right: 30vw;
    
}


.conteneur2 div {
    margin: 10px;
    padding: 5px 5px 10px 5px;
    background-color: white;
    border-radius: 20px;
    width: 29%;
    max-height: 30%;
    box-shadow: 1px 1px 12px #555;
}

.conteneur2 img {
    border-radius: 20px 20px 0 0;
    width: 100%;
    height: 60%;
}


.conteneur2 h4, p, i {
    padding-left: 5px;
    font-size: 100%;
}

.conteneur3 {
    padding: 5px;
    background-color: #f2f2f2;
    border-radius: 15px;
    width: 30vw;
    height: 100%;
}

.title {
    display: flex;
    
    justify-content:space-between;
}