Image with label Alignment

This site is best viewed in a modern browser with JavaScript enabled.

martin_b14

Hi Everyone,

I am a beginner and I am having difficulty aligning some images on the folowing site:
http://www.tudorbarneltham.co.uk/website/newsite/index.html

I am trying to get the four pics to align horizontally. (cafe, brasserie, weddings, events) I know it is the Labels I have added that are causing the problem but I can't work out what to do to get them in a horizontal row.

Please help.

Regards,

Martin

Coyotelab

		<div class="products_box">
			<ul>
			<li><a href="#"><h2>café</h2><img border="1"  title="Cafe" alt="Cafe" src="images/cafe.jpg"></a></li> 
			<li><a href="#"><h2>brasserie</h2><img border="1"  title="brasserie" alt="brasserie" src="images/brasserie.jpg"></a></li>
			<li><a href="#"><h2>weddings</h2><img border="1"  title="weddings" alt="weddings" src="images/weddings.jpg"></a></li>
			<li><a href="#"><h2>events</h2><img border="1"  title="events" alt="events" src="images/events.jpg"></a></li>
			</ul>
		</div>

CSS

.products_box{padding:0 0 10px 15px;}
.products_box ul {list-style: none;}
.products_box ul li {float: left; padding: 5px;}