Social Media in footer in IE, first icon is larger than the rest.

Social Media in footer in IE, first icon is larger than the rest.
Also, the Header not showing properly in mobile view.
This is the codes I have in quick css:
}
.title_container{
display: none !important;
}
#top .social_bookmarks { display: none; }
#wrap_all { box-shadow: 0 0 5px 3px #888888; }

.main_color .hr-inner {
border-color: #0080ff;
}

.main_color .hr-inner-style {
border-color: #0080ff;
}

.toggle_content {
overflow: auto;
}

.social_header #header_main .container, .main_menu ul:first-child > li > a {
height: 70px !important;
line-height: 70px!important;
}
#header_main {
z-index: 9999;
}
.logo {
position: absolute;
height: 270px !important;
width: 400px !important;
top: -25px;
}
.logo, .logo img{
max-width: 300px !important;
}
.title_container .breadcrumb { display: none; }
.title_container .main-title { display: none; }

td {
vertical-align: top;
}
.header_color .main_menu ul:first-child > li > a {
color: white;
}
.header_color .main_menu ul:first-child > li > a:hover {
color: #2e5c87;
}
div .logo { left: -52px; }

.avia-layerslider { padding-top: 30px; }

.home .iconbox_content {
min-height: 520px;
}
.iconbox_top .iconbox_content {
box-shadow: 3px 3px 2px black;
border: 1px solid #0080ff;
background: rgba(0, 128, 255, 1);
}
.page-id-1023 .main_color.iconbox_top .iconbox_content, .page-id-1023 .main_color.iconbox_top .iconbox_content, .page-id-1023 .main_color.iconbox_top .iconbox_content {
background: rgba(0, 128, 255, 1);
}
.iconbox_content_container {
font-size: 15px;
color: white;