<div class="conteneur">
  <div class="row">
    <div id="it1">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
    <div id="it2">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
    <div id="it3">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
    <div id="it4">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
  </div>
</div>

.conteneur {
  padding-right: 15px;
  padding-left: 15px;
}

.row{
  margin-right: -15px;
  margin-left: -15px;
  margin-top: 1em;
  margin-bottom: 1em;

}

.row> * {
  padding-right: 15px;
  padding-left: 15px;
}




/* basique CSS */

 #it1 {
  background: red;
}

 #it2 {
  background: blue;
}

 #it3 {
  background: green;
}

#it4 {
  background: grey;
}

* {
  color: #eee;
  background: black;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row > * {
  flex: 0 0 33.333333%;
  box-sizing: border-box;
  border: 1px solid;
}