Widen several vertical bars in CSS

Question

I am learning CSS and I would like to widen my vertical bars but I don't understand how to make this?

Here is a screenshot of my problem

I would like to understand how I would to widen my vertical bars?

There are several answers concerning the vertical bar but but I don't find a solution to my problem.

I thank you for your help because I am really stuck.

.container{
  width: 96%;
  margin: auto;
}


.box_items{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;

}

.img-logo{
  height: 28px;
}

.box{
  width: 21%;
  height: 200px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
}

.main{
  display: flex;
  text-align: left;
  width: 90%;
  border-right: 1px solid ;

}


.titre{
  font-size: 28px;
  padding-left: 15px;

}

.texto{
  padding-top: 30px;
}

.img-logo-02{
  margin-right: 5px;
}

<div class="container">
  <div class="box_items">

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/mz4v.png' alt="image">
       <div class="titre">Telephone</div>
     </div>

      <div class="texto">Just For VIP Member</div>

    </div>

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/wgl0.png' alt="image">
       <div class="titre">E-Mail Us</div>
      </div>

       <div class="texto">[email protected]</div>

    </div>

   <div class="box">
     <div class="main">
        <img class="img-logo" src='https://zupimages.net/up/20/34/epbs.png' alt="image">
        <div class="titre">Follow us</div>
     </div>

     <div class="texto"><a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/pnpm.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/qgz1.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/gdph.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/alck.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/evtq.png' alt="image"></a>
      </div>
    

     </div>

     <div class="box">
       <div class="main">
         <img class="img-logo" src='https://zupimages.net/up/20/34/txjb.png' alt="image">
         <div class="titre">Address</div>
       </div>

        <div class="texto">2699 BORAMBOLA, New South Wales,Australia.</div>

    </div>

  </div>


</div>
    

Answer 1

add border-right: 1px solid; and height: auto; in .box class

.container{
  width: 96%;
  margin: auto;
}


.box_items{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;

}

.img-logo{
  height: 28px;
}

.box{
  width: 21%;
  height: 200px;
  /*border-radius: 5px;*/
  position: relative;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  
  border-right: 1px solid;
  height: auto;
}

.main{
  display: flex;
  text-align: left;
  width: 90%;
  /*border-right: 1px solid ;*/

}


.titre{
  font-size: 28px;
  padding-left: 15px;

}

.texto{
  padding-top: 30px;
}

.img-logo-02{
  margin-right: 5px;
}

<div class="container">
  <div class="box_items">

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/mz4v.png' alt="image">
       <div class="titre">Telephone</div>
     </div>

      <div class="texto">Just For VIP Member</div>

    </div>

    <div class="box">
     <div class="main">
       <img class="img-logo" src='https://zupimages.net/up/20/21/wgl0.png' alt="image">
       <div class="titre">E-Mail Us</div>
      </div>

       <div class="texto">[email protected]</div>

    </div>

   <div class="box">
     <div class="main">
        <img class="img-logo" src='https://zupimages.net/up/20/34/epbs.png' alt="image">
        <div class="titre">Follow us</div>
     </div>

     <div class="texto"><a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/pnpm.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/qgz1.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/gdph.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/alck.png' alt="image"></a>

      <a href="http://google.be"><img class="img-logo-02" src='https://zupimages.net/up/20/34/evtq.png' alt="image"></a>
      </div>
    

     </div>

     <div class="box">
       <div class="main">
         <img class="img-logo" src='https://zupimages.net/up/20/34/txjb.png' alt="image">
         <div class="titre">Address</div>
       </div>

        <div class="texto">2699 BORAMBOLA, New South Wales,Australia.</div>

    </div>

  </div>


</div>