I've gone back a few steps to here as I want to try and add a sixth image so I have two columns of three images.. When I add the 6th image it floats low down the page... I can't get it to line up and it's driving me crazy! Please help.

HTML

<section> <ul id="gallery"> <li> <a href="img/1.jpg"> <img src="img/1.jpg" alt=""> <p>Pristine.</p> </a> </li> <li> <a href="img/2.jpg"> <img src="img/2.jpg" alt=""> <p>Storm clouds.</p> </a> </li> <li> <a href="img/3.jpg"> <img src="img/3.jpg" alt=""> <p>Softness.</p> </a> </li> <li> <a href="img/4.jpg"> <img src="img/4.jpg" alt=""> <p>Mountains, snow and ice.</p> </a> </li> <li> <a href="img/5.jpg"> <img src="img/5.jpg" alt=""> <p>Darkening skies.</p> </a> </li> <li> <a href="img/6.jpg"> <img src="img/6.jpg" alt=""> <p>Color on a cloudy day.</p> </a> </li> </ul> </section>

CSS

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: bdc3c7; }

It's the last "6.jpg" that won't sit nicely as the 3rd image down on the 1st column.