Q:

Background image not displaying correctly with css

I'm having a problem with an image not displaying correctly behind other icons.  I'm applying two separate images to surround icons.  The first one displays fine but the second one clips off at the bottom.  
Here's the site, the error can be seen in the footer: http://everythingdisc.hubs.vidyard.com/
<div class="inner">
    <div class="icons">
        <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">&nbsp;</a>
         <a href="https://twitter.com/everything_disc " id="twitter">&nbsp;</a>
         <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">&nbsp;</a>
    <div class="clear-left">&nbsp;</div>
    </div>
</div>

Here's the CSS I'm using:
#social-media .inner {
  display: inline-block;
  height: 74px;
  padding: 0 0 0 30px;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
  display: inline-block;
  width: auto;
  height: 59px;
  padding: 15px 20px 0 0;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

Anyone know why the image isn't displaying property?  

A:

You need to give same heights to both divs. 
#social-media .inner {
display: inline-block;
height: 74px;
padding: 0 0 0 30px;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
display: inline-block;
width: auto;
height: 74px;
padding: 15px 20px 0 0;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

