Pomocy- Wyśrodkowanie 3 divów, w jakiejś odległości od siebie

Mam taki kod: https://codepen.io/mateuszto/pen/wXpLvO
I no po prostu nie wiem jak to zrobić: margin:0 auto; odpada chyba bo nie będe mógł wtedy oddzielić ich od siebie np na odległośc: 40px; Chciałbym, żeby były na środku, ale niech będzie jakaś odległośc od nich np. te 40px;
Mam nadzieje, że zrozumiale napisane - z góry dziękuje za pomoc, poniewaz już długo się z tym główkuję :D

.cala
{
  
}

.d1
{
  
  display:inline-block;
  width:100px;
  height:100px;
  background-color:grey;
  margin-left: 40%; margin-right: 40px;   
}
.d2
{
  display:inline-block;
  width:100px;
  height:100px;
  background-color:green;
  margin-left: auto; margin-right: auto;
}
.d3
{
  display:inline-block;
  width:100px;
  height:100px;
  background-color:pink;
  margin-left: 40px; margin-right: auto;
  
}

Na przykład tak :)

Tak na szybko byle jak:
https://codepen.io/caderek/pen/GGybxL

Btw można to zrobić ładnie np CSS gridem