Wierd gaps. Cant work it out. Help Please.

[se7en.hu]

Hey guys, So I got these wierd gaps coming up. See code and screenshot below. Im sure its something simple, but I've been trying for a while and cant work it out.

Thanks

<div id="box">

	<div id="heading"></div>

    <div id="btns-1">
    	<a href="pamper.html" onmouseover="document.pam.src='images/pamper-mo.png'" onmouseout="document.pam.src='images/pamper.png'">
    		<img src="images/pamper.png" name="pam" />
    	</a>
		<a href="where.html" onmouseover="document.whe.src='images/where-mo.png'" onmouseout="document.whe.src='images/where.png'">
    		<img src="images/where.png" name="whe" />
    	</a>
		<a href="groups.html" onmouseover="document.gro.src='images/groups-mo.png'" onmouseout="document.gro.src='images/groups.png'">
    		<img src="images/groups.png" name="gro" />
    	</a>
		<a href="bookings.html" onmouseover="document.boo.src='images/bookings-mo.png'" onmouseout="document.boo.src='images/bookings.png'">
    		<img src="images/bookings.png" name="boo" />
    	</a>
    </div>

	<div id="btns-2">
    	<a href="jajawurrung.html" onmouseover="document.jaj.src='images/jajawurrung-mo.png'" onmouseout="document.jaj.src='images/jajawurrung.png'">
    		<img src="images/jajawurrung.png" name="jaj" />
    	</a>
		<a href="luccini.html" onmouseover="document.luc.src='images/luccini-mo.png'" onmouseout="document.luc.src='images/luccini.png'">
    		<img src="images/luccini.png" name="luc" />
    	</a>
		<a href="egan.html" onmouseover="document.ega.src='images/egan-mo.png'" onmouseout="document.ega.src='images/egan.png'">
    		<img src="images/egan.png" name="ega" />
    	</a>
		<a href="reghetti.html" onmouseover="document.reg.src='images/reghetti-mo.png'" onmouseout="document.reg.src='images/reghetti.png'">
    		<img src="images/reghetti.png" name="reg" />
    	</a>
		<a href="stanbridge.html" onmouseover="document.sta.src='images/stanbridge-mo.png'" onmouseout="document.sta.src='images/stanbridge.png'">
    		<img src="images/stanbridge.png" name="sta" />
    	</a>
		<a href="tommy-farmer.html" onmouseover="document.tom.src='images/tommy-farmer-mo.png'" onmouseout="document.tom.src='images/tommy-farmer.png'">
    		<img src="images/tommy-farmer.png" name="tom" />
    	</a>
    </div>
    
    <div id="photo-gallery"><img src="images/photo-gallery.png" /></div>

</div>

@charset "UTF-8";
/* CSS Document */

body {
	background:#ffffff;
	margin:0px;
	padding:0px;
}

#box {
	width:934px;
	margin:auto;
}

/* main divs */

#heading {
	position:absolute;
	margin:50px 0px 0px 0px;
	width:206px;
	height:182px;
	background:url(../images/heading.png) no-repeat;
}

#btns-1 {
	position:absolute;
	margin:50px 0px 0px 206px;
	width:728px;
	height:584px;
}

#btns-2 {
	position:absolute;
	margin:232px 0px 0px 0px;
	width:206px;
	height:189px;
}

#photo-gallery {
	position:absolute;
	margin:421px 0px 0px 0px;
	width:206px;
	height:213px;
}

Screenshot

[se7en.hu]

dont worry, got it. had to put align="left" in img tags.