Social media icons in heading causing problems

//I'm using a 2011 child theme based on m http://digitalraindrops.net/2011/09/twenty-eleven-three-menus/. I am using modified code based on http://digitalraindrops.net/2010/09/social-media/ for the social media icons. //

//I added the following code to the header.php file below the <body opening tag. DigitalRaindrops did not have <div></div> -- I added this. //

<body <?php body_class(); ?>>

<div id="social">
<?php /* Add in our Horizontal Social Media */ ?>
<?php get_template_part( 'social', 'horizontal' ); ?>
</div>

//Since http://digitalraindrops.net/2010/09/social-media/ includes functions for wp admin Options page, I had to create non-php hyperlinks for the social media icons. So, the social-horizontal.php file contains the following code://

<div class="social">
  <a href="http://www.twitter.com/psr" title="Twitter Connect"></a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png" alt="Twitter" />
  <a href="<?php bloginfo('rss2_url'); ?>" ><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.png" alt="Feed me" />
  <a href="https://www.linkedin.com/psr" title="LinkedIn Connect"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/linkedin.png" alt="<?php bloginfo('name'); ?>" />
  <a href="https://www.youtube.com/psr" title="Youtube"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/youtube.png" width="32" height="32" alt="<?php bloginfo('name'); ?>" />
  <a href="https://www.facebook.com/psr" title="Facebook Connect"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/facebook.png" width="32" height="32" alt="<?php bloginfo('name'); ?>" />
  <a href="https://www.gplus.com/psr" title="g+ Connect"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gplus.png" width="32" height="32" alt="<?php bloginfo('name'); ?>" />
  <a href="https://www.skype.com/psr" title="Skype Connect"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/skype.png" alt="<?php bloginfo('name'); ?>" />
  <a href="https://www.psr.com/contact-us" title="Email me"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/email.png" alt="<?php bloginfo('name'); ?>" />
  <a href="https://www.psr.com/contact-us" title="Call me"</a><img src="<?php bloginfo('stylesheet_directory'); ?>/images/callme.png" alt="<?php bloginfo('name'); ?>" />
</div>

//Now, I'm having a problem with the social media icons causing the top nav menu to overlap the searchbox. See http://www.prosocialroi.com/contact-us