How can I show 3 columns, but keep them aligned in the center?

<div class="wrapper">

  <div class="box one"></div>

  <div class="box two"></div>

  <div class="box three"></div>

</div>

.wrapper {

  display:flex;

  font-size: 0;

  justify-content:center;

}

.box {

  width: 20%;

  background-color: #f00;

  min-height: 200px;

}

.two {

  background-color: #ff0;

}

.three {

  background-color: #fff;

}

The below is the easy fix, but not a permanent solution.

https://jsfiddle.net/12yn26x3/

HTML

div class="wrapper" align="center">

  <div class="box one"></div>

<div class="box two"></div>

<div class="box three"></div>

</div>

CSS

.box {width: 20%; background-color: #f00; min-height: 200px;display:inline-block;}

.two {background-color: #ff0;display:inline-block;}

.three {background-color: #fff;}

Dear Ashraf,

Your solution leads me to make it work for me.

https://jsfiddle.net/m_zaid/hnfrLaf6/1/

Also, I have notice that while I am using display: inline-block, it's giving gaps between boxes, so I have given font-size:0 on the wrapper. This will remove gaps between boxes.

Thanks for the help.

Regards,

Muhammad Zaid.