Formatting container into circle results in oval instead

Issue

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

Solution

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>

Answered By - hussain