Under any resizing of the browser window there is a large gap both above and below the main image (Chrome).
If you resize your Chrome browser window vertically to reduce the height, you should see the space between the main image and the thumbnails reduced.
If you reduce the height of your browser window enough, you should see the main image virtually touch the top of the thumbnails.
As Felix says, there are a couple of things you could do.
(1) Increase the dimensions of your main images. I notice that your first main image is 500 x 375. If you were to increase the dimensions of your main images, they would better fill the available image area when using imageScaleMode="SCALE_DOWN". (When using JuiceboxBuilder to create a gallery, the default dimensions used when resizing images are 1024 x 768 which is ususally a good compromise between image dimensions, file size and quality.)
(2) Set imageScaleMode="SCALE" so that your small main images are scaled up to better fill the available image area.
After making such a change, you may have to clear your browser's cache before reloading the gallery.
Incidentally, I notice that your web page has 10 opening <div> tags but only 8 closing </div> tags.
You can check your page for HTML errors (and then fix the errors reported) using the W3C Markup Validation Service. Once the code on your web page validates, the page will be rendered by browsers with greater predictability and consistency across different browsers.
Edit:
Still loads of whitespace.
Now that you have changed your test gallery, there is no gap between the top of the main image and the top of the gallery and there is only a minimal gap (the thumbPadding) between the bottom of the main image and the top of the thumbnails (due to the use of much larger images).