<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 */



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

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

.row > * {
  flex: 0 0 33.333333%;
  box-sizing: border-box;
  max-width:33.33333%;
}