Allignment Issue with Image moved down

Hi

I got lots of help from this site. Now I am facing a simple problem which can beeaily solved by u all Designers.

I attached 2 image for reference -
1. SpoiledImage.jpg - After replacing the TextLogo.gif with Text generated by header.php here is the code
<div class="header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" style="text-decoration: none;">
<div class="logo">
<img src="<?php echo bloginfo('stylesheet_directory');?>/images/leftLogo.gif" alt=" <?php bloginfo( 'name' ); ?>" width="97px" height="88px" style="border:none;"/>
</div>
<div class="compname">
<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> //THIS IS CODE FOR DISPLAYING "SKS BUSINESS SERVICES"
</div>
</a>
<div class="logoright"></div> //HERE RIGHT LOGO IS COMING
</div>
style.css -
.header{
height: 101px;
width: 950px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #a5a5a5;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.compname
{
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-size: 38px;
font-style: normal;
font-weight: inherit;
margin-left: 130px;
margin-top: 0px;
outline: 0;
padding: 0;
vertical-align: baseline;
color:#FD1314;
}

.logo{
/*background-image: url(images/sks_05.gif);*/
background-repeat: no-repeat;
float: left;
height: 92px;
width: 100px;
margin-top: 5px;
margin-left: 17px;
}
.logoright{
float: right;
height: 70px;
width: 174px;
margin-top: 0px;
margin-right: 16px;
background-repeat: no-repeat;
padding-top: 0px;
background-image: url(images/logoright.jpg);
}

2. layout.jpg - Actually what it was and what it should be.

I am trying to fix this issues for last 2 days, finally decided to come in forum.

Thanx to you all in advance.

 

Try incrementing the margin-top of the class compname.