Article and Un-Ordered List overflow in responsive design - html

Question

I have a site consisting of three articles. I have a couple media queries set up for responsive design, but as I resize, it seems the ul and li elements of the article overflow the article (tested on an iphone5). I can hack around this by setting a height on the article to, say 200%, but would like to avoid this if I can. The CSS behind the article and ul:
#about {
background-color: #ebebeb;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#about h1 {
text-align: center;
margin: 0;
padding-top: 3em;
}
#about ul {
display: block;
width: 100%;
margin: 5em auto;
list-style: none;
padding: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#about ul li {
width: 20%;
float: left;
vertical-align: top;
margin:0 6.6666665%;
font-size: .8em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#about ul li img {
display: block;
margin-left: 2em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
And here is a jsFiddle => http://jsfiddle.net/sKvqF/
It's hard to recreate the effect it's giving without all the necessary code but I'm hoping someone can spot an error in my code somewhere.

Answer 1

I'm not 100% sure, what you are referring to by 'overflow' but if you are floating the list-items, you highly probable want to include a clearfix on your ul, such as:
#about ul:before, #about ul:after { content: ""; display: table; }
#about ul:after { clear: both; }
#about ul { zoom: 1; }
See https://stackoverflow.com/a/6539954/1696030
But be also aware of the high specifity of your CSS selectors, see f.e. http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/