How to get icons to you the top of the main container - html

Question

hey guys i am new to css in general , I am having a small problem with positioning a couple of social icons, basicaly , all i want to acheive is the following :
the social icons should be centered.
the social icons should touch the top of the main container div .
the 1st objective i have acheived , but i am having difficulty with the secound . , below is the HTML and CSS code :
HTML ::
<section id="contact-us" class="contact-us">
<div class="overlay">
<div class="social-icons">
<ul>
<li>
<a href="">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="">
<i>|</i>
</a>
</li>
<li>
<a href="">
<i class="fa fa-facebook"></i>
</a>
</li>
</ul>
</div>
</div>
</section>
CSS ::
html,body {
height: 100%;
}
.contact-us {
background: url(http://wallpaperswiki.com/wallpapers/2012/12/Abstract-Color-Point-1050x1400.jpg);
height: 100%;
}
.overlay {
height: 100%;
background: rgba(146,39,143,.5);
}
.social-icons {
text-align: center;
}
.social-icons ul {
list-style: none;
padding:0;
margin: 0;
display: inline-block;
}
.social-icons ul li {
margin-left: 5px;
margin-right: 5px;
display: inline-block;
}
.social-icons li a {
color: #fff;
}
.social-icons li a i {
font-size: 2em;
}
FIDDLE HERE
notice how the social icons are not touching the top of the main container. actually , all three elements , the 2 social icons and the line inbetween them should touch the top of the main container.
ON inspection :: i am using bootstap , and bootstap has a line-height of 1.42857 as default , if i make the line-height on social-icons to 0 the socia icons get closer to the top , NEARLY SOLVES MY PROBLEM . but still not all three icons are touching the top ? WHY ? and how do i solve this problem ?
EDIT ::
The output i want is the following :
Thank you.
Alex-z.