Make ids responsive

Make ids responsive

I'm having a problem on a website I'm building for myself.
http://quick.as/lnlhra
I want the icons to be responsive to the browser size. For now, I have the
CSS set so for each icon, the left is set at a certain percent e.g. For
one icon, the html is:
<a id="mail" class="social" href="mailto:nishadt15@gmail.com"></a>
The CSS for #mail and .social is:
.social {
position: absolute;
top: 95%;
height: 40px;
width: 45px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #3db48b;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#mail {
left: 39%;
background: url(../img/mail.png) no-repeat center center;
background-size: 40px 40px;
}
Obviously setting left to a percent is a bad idea because the icons will
start to overlap while trying to maintain the percent. Is there a way to
remedy this with a different method?