why when I set the margin from the icon the block moves

Question

I set margin-top to the mail icon,but div moves too I don't understand what is my mistake? In html they are in the same class image

     div.support{
    width: 100%;
    background-color:$blood;
    height: 15vh;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    div.container{/*It moves too*/

        flex:1;
        h1,span{

        margin-top: 0;
        margin-left: 5vw;
        color:white;

    }

}
        div.iconicfill-mail:before{/*Mail icon */
            display: inline-block;
            margin-left:2vw;
            font-size:40px;
            margin-top: 3vh;
        }

    span{
        margin-top: 15px;
    }