Fluid 2-col layout issues. inline-block elements overhanging the edge of the container - background-color

Question

I'm trying to use 2 column fluid layout in my footer.
The right side column in the footer has a list of inline-bock elements - social icons. This works well until you start to re-size the width of the browser. At one point the social icons start to overhang the background of the footer.
This is how it looks when viewport is of normal size:
Problem shows when viewport gets smaller:
I've tried to simplify this down as much as possible in this fiddle. Notice how those links start to overhang when viewport is re-sized.
I would like that background of the footer to contain those links entirely
http://jsfiddle.net/ambidexterous/xwugnyh1/1/
css:
.l-columns {
vertical-align: top;
}
.l-columns:before,
.l-columns:after {
content: " ";
display: table;
}
.l-columns:after {
clear: both;
}
.l-columns {
*zoom: 1;
}
.l-columns-85 {
width: 85%;
}
.l-columns-15 {
width: 15%;
}
.l-columns-left {
float: left;
}
.l-columns-right {
float: right;
}
footer {
background-color: #002A54;
}
.l-horizontal-inline-list li{
list-style-type: none;
display: inline-block;
}
.l-horizontal-inline-list li a{
margin: 5px;
}
html:
<header>
<h1>HEADER</h1>
<header>
<article>
luptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum qui
</article>
<footer>
<div class="l-columns">
<div class="l-columns-85 l-columns-left">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="l-columns-15 l-columns-right">
<ul class="social l-horizontal-inline-list">
<li>
alfa
</li>
<li>
beta
</li>
<li>
gamma
</li>
<li>
charlie
</li>
</ul>
</div>
</div>
</footer>

Answer 1

The reason this is happening is that ul li lists always have left margin even if you set list-style-type: none;
you could restyle this adding
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-position: 0px center;
}
here's a fiddle

Answer 2

Interesting, I've never seen :before and :after used to insert a table pseudo-element.
Add display: table-cell; to these classes:
.l-columns-85 {
width: 85%;
display: table-cell;
}
.l-columns-15 {
width: 15%;
display: table-cell;
}
You can then remove this CSS:
.l-columns-left {
float: left;
}
.l-columns-right {
float: right;
}
Working Fiddle