my img only display a half. CSS issue

Question

I've got a problem about CSS issue. My image only half displays when I try to add new image.

 ul.social li{ display: inline-block; } ul.social li i{ background: url(../images/img-sprite.png)no-repeat -4px -36px ; width: 48px; height: 48px; display: inline-block; vertical-align: middle; margin: 0 5px 0 0; } ul.social li i.twitter{ background-position: -64px -36px; } ul.social li i.google{ background-position: -122px -35px; } ul.social li i.ig{ background-position: -200px -35px; } ul.social li i:hover{ background-position: -4px -93px; } ul.social li i.twitter:hover{ background-position: -64px -94px; } ul.social li i.google:hover{ background-position: -122px -92px; } ul.social li i.ig:hover{ background-position: -200px -92px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="col-md-4 footer-top"> <ul class="social"> <li><a href="#"><i> </i></a></li> <li><a href="#"><i class="twitter"> </i></a></li> <li><a href="#"><i class="google"> </i></a></li> <li><a href="#"><i class="ig"> </i></a></li> </ul> </div> 

And Here is the result :

can anybody help me here to solve my problem?

Answer 1

It depends on how sprite.png is laid out, but you probably just need to change:

ul.social li i.ig{
    background-position: -200px -35px;
}

to

ul.social li i.ig{
    background-position: -170px -35px;
}