heres what it looks like:
but it shouldn't have that gap on the second row.

the way I have it set-up is this

<div id="navigation"> (top navigation part...not concerned about)
</div>
<div id="photos_search_container"> (main container with the background image)
<div id="photos_container"> (left container for the photos, the issue :] )
<div class="images"> just used to put a border around the images
<div id="thumnbail_container"> (images are inside here, width set to 130px)
</div> (end div thumbnail container)
....(repeat thumbnail container)
....
</div> (end images div)
</div> (end photos_container div)
<div id="search_container"> (right side of photos_search_container)
</div> (end search_container div)
</div> (end photos_search_container div)

The css is as follows:

#photos_container
{
margin:0px auto;
width:650px;
border-right:1px double #02425B;
float:left;
margin-top:10px;
margin-left:10px;
text-align:center;
}
#photos_search_container
{
margin:0px auto;
padding:0px;
width:950px;
border:0px;
background-repeat: no-repeat;
background-image:url('http://fc08.deviantart.com/fs27/f/2008/128/4/7/BG_by_IkeGFX.jpg');
}
/* self clearing rules */
#photos_search_container:after
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#photos_search_container
{
    display:inline-block;
    _height:1%;
}
/* Hides from IE-mac \*/
#photos_search_container
{
    display:block;
}
.images img
{
border:0;
border:5px solid white;
border-style: double;
float:left;
position:relative;
}
#thumbnail_container
{
    position:relative;
    float:left;
    width:140px;
    margin-left:3px;
    margin-right:3px;
    margin-bottom:3px;
}
#search_container
{
float:right;
width:289px;
height:400px;
margin:auto;
display:block;
margin-top:10px;
}

I've been playing around with it a bunch, but have had no luck in finding the solution. Thanks for any help.

The fifth image is floating against the third image, which is slightly taller than it's immediate siblings. Unless you enforce a certain height on all images (which doesn't look practical) you will have to clear every fifth image, like this:

<style>
img.clear {
clear: both;
}
</style>

The problem is that your class name doesn't match your div ID.
The div ID should be "thumbnail_container", not "thumnbail_container".
There isn't an issue with the clearing as they are self-cleared because of the specified width.
Cheers.

Ah, the evil typo.