When I write in the div it goes out of place

Question

#meio {

  width: 100%;

  text-align: center;

}

.box {

  margin: 10px 4px;

  margin-bottom: -4px;

  display: inline-block;

}

#box-1 {

  width: 290px;

  height: 300px;

  background-color: white;

}

#box-2 {

  width: 290px;

  height: 300px;

  background-color: white;

}

#box-3 {

  width: 290px;

  height: 300px;

  background-color: white;

}

<div id="meio">

  <div id="box-1" class="box">aaaaa</div>

  <div id="box-2" class="box"></div>

  <div id="box-3" class="box"></div>

</div>

Answer 1

Add a "display: flex" to your #middle id. There you can even remove the "display:inline-block" from the . box class

#meio {

  width: 100%;

  text-align: center;

  display: flex;
}

.box {

  margin: 10px 4px;

  margin-bottom: -4px;

}