CSS - Center container of flex elements

Question

I have a codepen here - https://codepen.io/anon/pen/RMdYyG

Really simple but I'm stuck.

I have a 3 elements positioned next to each other with inline-flex.

I need to center the container of 3 elements horizontally in the middle of the page.

I thought I could simple do it with margin: 0 auto;

.page{
  border: 1px solid red;
}
.con{
  border: 2px solid green;
  display: inline-flex;
  text-align: center;
  margin: 0 auto;
}
.con > div{
  background: red;
  color: white;
  height: 50px;
  width: 50px;

}

Answer 1

You can either do what VXp said, or just add the text-align: center into your page class:

.page{
  border: 1px solid red;
  text-align: center;
}