Formatting container into circle results in oval instead - html

Question

Trying to format icons, inside of a circle, results in an oval being created instead. It also seems like, behaviour changes between the platforms, because, on Google Chrome, they are vertical ovals(See here - https://prnt.sc/1tb2phl)
Have made the codepen example here - https://codepen.io/raicha/pen/dyRjwwa but just in case, code is here too
.container{
position: absolute;
width:6%;
height:6%;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
}
#facebookContainer{
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube{
position: absolute;
left: 65%;
right: 76.72%;
}
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
And also, maybe there is a better way to organise this stuff? :) Would be nice, if you let me know

Answer 1

You cannot specify container width to be 6% height and 6% width. it takes 6% of total height and 6% of total width which are definitely different values and for a circle you need to specify exact values. For example
height: 3rem or 50px
width: 3rem or 50 px
this code below woks now i specified width and height same on container.
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
<style>
.container {
position: absolute;
width: 50px;
height: 50px;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.comntainer img {
width: 100%;
height: 100%;
}
#facebookContainer {
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube {
position: absolute;
left: 65%;
right: 76.72%;
}
</style>