Simple html code I'm having such a difficult time with - html

Question

Okay seriously I feel so stupid for not being able to figure this out, I guess it's just Monday or something. Anyway I'm trying simply to make something like this as well as the logic I'm using.
. So I wrote what's happening into a js fiddle
for you all and hoping you can help.
I know that this is going to be one of those things that ends up making me feel so stupid but for some reason I cannot figure out what's wrong.
HTML5
<div id="logo-wrapper">
<ul>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
</ul>
<ul>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
</ul>
<ul>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
</ul>
</div>
CSS3
#logo-wrapper {
width: 70%;
margin: 2% auto;
background-color: #2CAD96;
}
#logo-wrapper ul {
margin: 2%;
float: left;
background-color: #FFFFFF;
}
#logo-wrapper ul li {
list-style: none;
display: block;
margin: 2%;
}
#logo-wrapper ul li img{
width: 200px;
height: 100px;
}

Answer 1

ul lists have a default padding so you'll probably want to remove that with padding:0;.
Also you set the width of your #logo-wrapper to a certain value, even though the images inside might not fit. So you can either scale the images using width:100%;height:auto; or not set a width on the wrapper.
Also you'll want to add display:inline-block; to the ul and li elements and give them a width 40% or so.
And finally put a padding not a margin on the #logo-wrapper.
Edit: here's the JSFiddle http://jsfiddle.net/6AvNM/9/ if you tweak it some more you'll get your squares sorted out :)

Answer 2

First of all you need to clear floats. In my demo I used clearfix class. Also you might want to set a width to ul and li. I set them to 46% providing that you use margin 2%. Also make sure you reset default paddings on UL and LI.
#logo-wrapper ul li {
list-style: none;
display: block;
float: left;
margin: 2%;
width: 46%;
}
http://jsfiddle.net/6AvNM/11/

Answer 3

Ok, I fiddled around also a bit, the difference to the other posts is: mine is not resizing, you did not specify that. Also on #dfsq's solution, the images loose side-relation, however, nice one. (y)
I used mainly display: inline-block here to avoid clearing floats and giving the wrapper a height. Since this is static now, you either have to give all elements the right size to work (wrap automatically) or put a <br> where you want it to wrap.
*
{
box-sizing: border-box;
}
#logo-wrapper
{
width: 1000px;
margin: 2% auto;
background-color: black;
display:inline-block;
}
#logo-wrapper ul
{
margin: 2%;
display:inline-block;
background-color: red;
padding: 0;
width : 450px;
}
#logo-wrapper ul li
{
list-style: none;
display: inline-block;
margin: 2%;
}
#logo-wrapper ul li img
{
width: 200px;
height: 100px;
}
jsFiddle: http://jsfiddle.net/6AvNM/12/