I searched through examples on stack overflow that had similar problems to mine, but unfortunately, I couldn't find a solution. I'm not sure what I'm doing wrong, but the div is not aligning horizontally center as expected. It seems to work only for certain screen resolutions and when loaded on different screens, it's not centered. I tried using margin: 0 auto; but it didn't solve the issue.
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="Instagram" 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);
}