I'm trying to make div to auto adjust horizontally in the middle by using margin

I looked through example at stack overflow whose problem where similar to mine but without success. I do not know what am I doing that is wrong but the div is not going to horizontally middle well so far it only works for certain resolution screen but if I load it to different screen its not in the middle so i use margin: 0 auto; but still didn't work.

HTML

<div class="margin">
    <div class="BoxContainer">
        <a href="https://medium.com/@sudeep_shahi"><div class="box"><img src="img/medium.png" alt="medium" style="width:100%;height:100%;"></div></a>
        <a href="www.linkedin.com/in/sudeep-shahi-92375010a"><div class="box"><img src="img/linkdin.png" alt="linkdin" style="width:100%;height:100%;"></div></a>
        <a href="https://www.instagram.com/westkinz/?hl=en"><div class="box"><img class="effect" src="img/instagram.png" alt="Itragram" style="width:100%;height:100%;"></div></a>
    </div>          
</div>

CSS

.margin{
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 5px;
    background-color: #EBEBEB;
}
.boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
    background-color:#EBEBEB;
}
.box {
    width: 300px;
    height: 300px;
    background-color:#EBEBEB;
    display: inline-block;
}

.box :hover{
    border-radius: 50%;
    transform: rotate(360deg);
}