Horizontal widgets Using YD Featured Box

Hi,
Im having a slight issue with horizontal widgets.

I have created a horizontal widget area after the header; conveniently a div called after header. Its sits under my menu. I have three instances of YD featured box in place, to create a photo style blog… all is fine except one thing… I cant make the images (3 of them) flush to either side.

If you look below you can see that the images arent filling the space equally, there is a gap on the right. I have tried adjusting the margins, but as the css is for one widget it moves them onto another line if I increase the right margin any more:
Here is my site

Here is my CSS for the widgets:

div.yd_featured_box {
	width: 300px;
	height: 250px;
	background-color: none;
	position: relative;
	margin-bottom: 20px;
	cursor: pointer;
	float: left;
	margin-right: 18px;
	margin-top: 5px;
	align: center;
}
div.yd_featured_box img {
	width: 300px;
	height: 221px;
	position: absolute;
	top:22px;
	border: 1px #000 solid;
}
div.yd_featured_box div h2 {
	background:transparent;
}
div.ydfb_text_top {
	position: absolute;
	top: 0;
	height: 120px;
	width: 300px;
	background-color: none;
	padding-bottom:20px;
	padding-top: 255px;
	-moz-border-radius: 5px 0 0 0;

}
div.ydfb_text_bottom {

	background-color: none;
	border-top:none;
}

I’m sure I could use a selector to hit one of the items, which I have tried (Im using thesis btw). This isnt working…

.custom li#yd_featuredboxwidget-4 {
float: right;}

Any help or advice you could offer would be greatly appreciated