margin-left doesn't work in Firefox - css

Question

In my code margin-left: is working only in the other browsers. In Firefox it seems I need to double every values i give to the margin-left: that works for the other browers. The element i need to marge is the blue circle.
If I inspect the element and change the css in the inspector and then i give margin-left: 60px (my margin-left: is normally 30px) it works. The same goes for 1em (is i put a 2em it works).
I just strated a formation so i'm not an expert, so if one of you can see where I've made a mistake, thanks in advance for telling me !
Here's my code
.cercle-logo {
height: 65px;
width: 65px;
color: #5CADD3;
border: 2px solid #EBEBEB;
margin-top: 15px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.cercle-logo:before {
content: "";
border: 5px solid white;
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #5cadd3;
position: absolute;
margin-left: 2em;
box-sizing: border-box;
}
<div>
<span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>

Answer 1

Some browser use the parent padding as an offset for the absolute position child elements (chrome does this), because it's obvious that you will move the element using left,right,top,bottom not the margins
Say you have padding-left:20px, on the parent, and you set position absolute on one of it's children, if you won't see much changes, because some browsers uses that 20px and add it as an offset left:20px
One simple solution is to rest the offset, then use margins to push it, which i don't recommend you can use the left property to push it.
.cercle-logo {
height: 65px;
width: 65px;
color: #5CADD3;
border: 2px solid #EBEBEB;
margin-top: 15px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.cercle-logo:before {
content: "";
border: 5px solid white;
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #5cadd3;
position: absolute;
left: 3.7em;
box-sizing: border-box;
}
<div>
<span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>

Answer 2

Thank you for your answer but I might have done something wrong because even though your explanation were clear, and the "code snippet" works well (I test it directly on Firefox), when i write is in Bracket and test it, it moves my blue circle totally on the left but this time on every browsers ...
Is there something I missed ?
Thank you for your time anyway !