I am still learning about this and I have been following some tutorials online. I managed to make the columns work with paragraph tags, but when I use ul > li tags, the image takes up the entire space.
I'm not sure what's causing this issue. What's really confusing is that it seems like the li/image has a right margin equal to the whole space, even when I set it to zero.
While inspecting the element, the margin shows as 0 0 0 0, but on hovering over it, it appears to take up the whole page...
Code displayed below...
<html>
<head>
<meta charset="utf-8">
<title>Layout Test</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/960.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<body>
<div class="header">
<h1>This is a test</h1>
</div>
<div class="container_12">
<div class="grid_4">
<ul>
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
<li><a href="#"><img src="img/6.jpg"></a></li>
</ul>
</div>
</div>
</body>
</head>
</html>