Problem with WordPress Twenty Eleven Site title+description position

Made a child theme for WordPress Twenty Eleven Theme.
Replaced Site title with image.
Added an image with id "boy" to the header area.
Made the elements in the header display:inline
What's the best way to make the site title align to the center of and in line with the boy image?

Here's an image with an arrow pointing to where I want it: http://awesomescreenshot.com/0b51fnu9a0

My CSS child-theme code is as follows-

#branding hgroup {
 
    display: inline;
    text-align: center;
    letter-spacing: 3px;
    }
     
    header#branding{ 
    background: #ffffff;
    color: #B3BDC1; 
    } 
   
    #branding img {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    display: inline;
    width: 100%;
}
 
     
header#branding h1, header#branding h2, header#branding a{
    color: #B3BDC1;
} 
 
#site-title {
    display: inline;'
    margin-right: 0;
    padding: 3.65625em 0 0 0;
}
 
#site-description {
    display: inline;
}
 
#branding {
    border-top: none;
}
 
#site-title img {
height:45px;
width:270px;
}
 
#branding img#boy {
float: left;
height:144px;
width:140px;
}

Code (markup):

If I haven't modified it here consider it to be using the parent property.
I have hosted the website locally so can't post the link here.
Please help.

 

Found a fix after tinkering a little.
Here's how I did it-
Instead of using the boy image as a separate image I used it as a background of the #branding div. And made minor adjustments to the Site title and description to get it to align center.

Here's the css code:

#branding hgroup {
text-align: center;
letter-spacing: 3px;
}
 
header#branding{
border-top: none;
color: #B3BDC1;
background-image:url('images/boy.png');
background-repeat:no-repeat;
background-position:left bottom;   
}
 
#site-title {
margin-right: 0;
padding: 3.65625em 0 0;
}
 
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: -15px 0 3.65625em 0;
}
 
 
#branding img {
margin: 0 auto;
height: auto;
width: 100%;
}

Code (markup):