How to center wrapper on page - links

Question

I had my wrapper perfectly centered on my website but when i added the links to the icons inside of it, their position changed. I tried to center them again but now it doesnt seem to work well because when i change the zoom or resize the page they are not in the center anymore.

the HTML

<div class="wrappericons">
    <a href="http://www.facebook.com"><div id="facebook"></div></a>
    <a href="http://www.youtube.com"><div id="youtube"></div></a>
    <a href="http://www.twitter.com"><div id="twitter"></div></a>
    </div>

And the CSS

.wrappericons {
    margin: auto;
    width: 15%;
    background-color: none;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    padding-left: -20px;}


#facebook {
    height: 60px;
    width: 33,33%;
    margin-left: 50%;
    margin-right: 50%;
    background-color: none;
    background-image: url(icons/facebookgrey.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;}

#facebook:hover {
    background-image:url(icons/facebook.svg);}

#youtube {
    height: 60px;
    width: 33,33%;
    margin-left: 75%;
    background-color: none;
    background-image: url(icons/youtubegrey.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;}

#youtube:hover {
    background-image:url(icons/youtube.svg);}

#twitter {
    height: 60px;
    width: 33,33%;
    margin-left: 100%;
    background-color: none;
    background-image: url(icons/twittergrey.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;}

#twitter:hover {
    background-image:url(icons/twitter.svg);}

PS: i used Chrome to see this code

Answer 1

I'm not sure if it is what you wanted to do, but I created this JSFiddle and the result may be what you expected.

I used the HTML that @Berat Baran Cevik created so it is in a acceptable HTML syntax (you shouldn't be putting blocks - Div, Sectin, etc - inside link tags).

    <div class="wrappericons">
          <span id="facebook"><a href="http://www.facebook.com"></a></span>
          <span id="youtube"><a href="http://www.youtube.com"></a></span>
          <span id="twitter"><a href="http://www.twitter.com"></a></span>
    </div>

In the CSS I mainly changed the "," in the width property by "." As each div has its own width, you don't need to specify a margin-left nor its position, so I also took it off.

.wrappericons {
    margin: auto;
    width: 100%;
    background-color: none;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;}


#facebook {
    height: 60px;
    width: 33.33%;
    background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;
}

#youtube {
   height: 60px;
    width: 33.33%;
    background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;
}

#twitter {
     height: 60px;
    width: 33.33%;
    background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;
}