Problem with footer padding – background conflict

Theme: Twenty Thirteen

Check: https://rohitpalit.com/blog/ (under-construction)

The footer appears fine if viewed on a large-resolution monitor (because the sprite images get aligned in the same line).

If the images aren’t aligned in the same line, the background of those images become white, as the off-white padding is fixed @ 60px. Increasing it further means more site height (fixed).

I’m using a child theme. This is what I added to my custom style.css :

@import url("../twentythirteen/style.css");

.site-footer {
}

.site-info {
padding: 30px 0 60px 0;
position: relative;
}

.ppb {
font-size: 24px;
font-family: Bitter, Georgia, serif;
float: left;
color: #3f3334;
margin-left: 12px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

.ppb:hover, .ppb:active{
color: #111010;
}

.footer-logos {
float: left;
}

.MaxCDN, .MaxCDN:hover, .wordpress, .wordpress:hover{
background: url(images/sprites.png) no-repeat;
}

.MaxCDN:hover{
background-position: -235px -23px;
}
.MaxCDN{
background-position: -18px -23px;
width: 200px;
height: 33px;
float: left;
margin-top: 7px;
margin-left: 12px;
margin-bottom: 10px;
text-indent: -9999px;
color: transparent;
}
.wordpress{
background-position: -14px -74px;
width: 50px;
height: 50px;
float: left;
margin-left: 12px;
margin-bottom: 10px;
text-indent: -9999px;
color: transparent;
}
.wordpress:hover{
background-position: -87px -74px;
}

I want the padding/off-white background to adjust itself according to the current height of that portion of the page. So that it remains responsive.