CSS - Propiedad display:flex

Tengo un contenedor con cuatro divs internos. A ambos les especificio una altura y anchura y a los contenedores internos ademas un margen de 20 px.

Codigo HTML:

<div class="container">
<div class="element element1">1</div>
<div class="element element2">2</div>
<div class="element element3">3</div>
<div class="element element4">4</div>
</div>


Codigo CSS:

*{ margin: 0;
padding: 0;}

body{background-color: white;
color: black;
font-family: Verdana;}

.container{width: 90%;
max-width: 1000px;
height: 800px;
margin: 0 auto;
margin-top: 40px;
font-size: 50px;
line-height: 50px;


display: flex;

.container .element{padding: 20px;
color: white;
background-color: #2f89fc;
text-align: center;
margin: 20px;
width: 80px;
height: 80px; }

Me he dado cuenta que al aplicar display:flex, los divs internos pasan a tener un espaciado entre ellos de justo el doble (40px); es decir, la propiedad flexbox duplica el margen. Alguien sabe pq?

Un saludo