Header Social Icons

Hello Support Team,

I have a question concerning the social icons. I have managed to add a dotted divider to the top right corner of the homepage. The social icons however do not seem to appear next to the dotted line (small fixed header with social Icons).

If I change the header options to non Fixed Header with Social icons, I can see the icons and they go to the center when the window size changes (just like on your site).

What do I have to change to I can see the social icons on the top right corner (small fixed header with social icons)? Here is my style.css code:

/*header with social icons - change how large the height can be */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 80px; line-height: 80px; }

/* changes social hover from circle to rounded square */
#header_main .social_bookmarks li a {
	border-radius: 3px;
	font-size: 16px;
}

/* moves the main nav left and changes right border */
#top .main_menu {
right: 100px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}

/* moves the social nav to the right of main nav */
#header_main .social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0px;
}

/* hides the normal social div at the top */
#header_meta {
	display: none;
} 
 
/* removes border */
.responsive #header_meta .social_bookmarks li {
	border-style: none;
}

/* removes border */
.responsive #top #header_meta .social_bookmarks li:last-child a {
	border-style: none;
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

	/* removes padding at the top behind logo after I shrink the main logo/navigation div height */
	.fixed_header.social_header #main {
		padding-top: 81px;
	}
	

}

/* Smaller than standard 960 (devices and browsers) (ipad Portrait)*/
@media only screen and (max-width: 989px) {

	/* adds the HKUSCG as a background */
	div .logo {
		background: url(https://www.hkuscg.com/wp-content/uploads/2013/10/S3transparentbackground-e1382792986200.png) top left no-repeat;
		top: 11px;
	}
	
	/* makes the default logo transparent */
	.logo img {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */

	
	/*gives more space below main blog name when it is long and wraps to two lines on phones*/
	.title_container .main-title {
		line-height: 1.5em;
	}

	/* moves the icon logo on smaller screens */
	.responsive .mobile_slide_out .logo {
		margin-top: 10px;
		margin-bottom: -10px;
	}
	
	/* moves socket nav away from top link */
	#socket .sub_menu_socket div {
		float: right;
		margin-right: 60px;
	}
	
	/* change social icons */
	#top .social_bookmarks li a {
		font-size: 19px;
		width: 40px;
	}
	
}

I would like to thank you in advance.

Regards,

Frank.