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 - 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>