Social Icon Placement

I have adjusted the image size for my logo in the header (990 x 202) however, in using this large image for a header logo has moved my social icons down, thus creating too much space below header logo. I have tried several CSS calls in my child theme but just can’t seem to manipulate the correct pieces. I had the the social up at the top just about level with letters in logo but when I looked at in a full width screen (desktop screens) it slides out of screen, way right out of the header…. what am i missing? I haven’t even gotten to what this all looks on mobile. IF I can solve two problems at once would be a bonus.

Website: http://funds2orgs.com/

This is what I have in my custom CSS

*[class *= "col-"] {
position: relative;
margin-right: 30px;
margin-bottom: 20px;
float: left;
}

#nav li a { padding: 8px 20px !important; }
margin-top:20px;
}

#content-inner {
	padding-top:30px !important;
}

#content {
/* hammer changed margin-top:60px to 20px */	
margin-top:10px;
}

#logo-wrap {
	float:left;
/* hammer changed width:auto; to removed and added the postion and left */
position:relative;
	left:-30px;
	width:auto;	
	display:inline-block;	
}

#logo {
margin-top:-40px !important;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
	float: left;
}

#logo a {
	font-size: 32px;
	line-height: 30px;
	color: #434343;
	font-weight: bold;
}

#tagline, #site-info {
	font-size: 12px;
	line-height: 20px;
	color:#000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 0px;
	font-weight: bold;
	clear:both;        
}

#header {
/* hammer changed padding-bottom:40px to 20px */		
padding-bottom:5px !important;

}

img {border-style:none;vertical-align:top;
 max-width:100%;
height:auto
}	

#logo-wrap {
	float:left;
/* hammer changed width:auto; to removed and added the postion and left */
position:relative;
	left:-30px;
	width:990px;	
	display:inline-block;	
}

#nav li a {	
/* Hammer changed color from color:#767676 */
	color:#000;
}

#nav ul a, #nav li.sfHover li>a {	
/* Hammer change color from color:#767676 */
	color:#000;
}

@media (max-width: 710px) {
#header { max-width: 100% !important; }
}

.social li {
	display: inline;
	text-indent: -9999px;
}

.social li a {
	background-position: 0px 0px;
	width: 33px;
	height: 33px;
	margin-right: 3px;
	margin-bottom: 3px;
	float: left;
	-webkit-transition: 140ms ease-in-out all;
	-moz-transition: 140ms ease-in-out all;
	transition: 140ms ease-in-out all;
}

.social li a:hover {
	background-position: 0 0px !important;
}

body, input, textarea 
{
/* Hammer change the color from color: #656565 */
	color:#000;
}

span.dropcap {	
color:#bf202d;
}

#site-info {
	color:#000;
}

#site-info span {
	color:#000;	
}

#nav li a {
	color:#000;
}
#nav ul a, #nav li.sfHover li>a {	
	color:#000;
}