Having a height "stretching" issue that is so simple its driving me insane

I'm trying to make the "navcon" section/image stretch no matter how many icons are added and its not working the way I would like. The "fa-shopping-cart" icon is being shown outside of the "lexnav" image. Any help is greatly appreciated, thanks in advance.

http://codepen.io/baytes/pen/vGxVpR

                 <div class="carousel-text">
                   <div class="navcon">
                     <div class="lexnav">
                        <div class="lex_social">
                           <a href="#" target="_blank"></a>
                           <a href="#" target="_blank"></a>
                           <a href="#" target="_blank"></a>
                           <a href="#" target="_blank"></a>
                           <a href="#" target="_blank"></a>
                        </div>
                     </div>
                  </div>

.navcon {
  max-width:323px;
  max-height:100%;  
}

.lexnav {
  background: url("../js/img/nav.png") no-repeat left top;
  background-size:100% auto;
  width:223px;
  height:100%;  
}

.lex_social{  
 /* padding-top: 190px; */
  padding-top: 195px;
  margin-left: 90px;
  height: auto;
  width: 900px;  
  position: relative;
}

@media only screen and (max-width: 420px) {
    /* styles for narrow screens */
    
.lexnav {locate 
  background: url("../js/img/nav.png") no-repeat left top;
  background-size:100% auto;
  width:150px;
  height:372px; }

.lex_social{  
  padding-top: 210px;
  margin-left: 105px;
  position: relative;
  }
}

Thanks,

Brad