Thank you for posting the URL to your gallery's web page.
It's always easier to troubleshoot a problem when I can see the gallery for myself.
A <div> is just a generic container for content on a web page. (Please see here for more technical details if you like.)
A <div> can be thought of as being just a rectangular block of content on a web page (the content might be text, an image or, in your case, a Juicebox gallery). The gallery container (a <div>) is really just a rectangle on your web page which just needs to be sized and positioned correctly. (It might help to think of the gallery like this instead of the complex image viewer that it is.)
It looks like you're making progress.
However, your gallery's <div> is nested inside another <div> (<div id="body">) which has been assigned CSS in your 'style.css' file as follows:
#body {
float: left;
position: relative;
width: 279px;
margin-top: 216px;
margin-left: -588px;
z-index: 21;
min-height: 872px;
}
It's difficult to explain what's going on without referring to the code that is making it all happen but, essentially, the container that the gallery's container is inside has been given a very small width (279px) and all content within this parent container has been told to start very close to the centre of what looks like the 'body content' area of your page (which is why there is currently a lot of blank space to the left of your gallery).
There's a lot of CSS in your 'style.css' file and it might be difficult to try to figure out exactly why each container on your web page has been given the widths and margins that they have (especially as the page layout has been created by a program rather than a human being).
It might be enough to just shift your gallery over to the left (by about 250px) using a negative margin.
Your page already makes extensive use of margins (there are 61 different 'margin' entries in your 'style.css' file which is why trying to figure out where everything should be just by looking at the code is not easy) so adding another margin for the gallery's <div> might be a suitable solution.
In your gallery's embedding code, try changing the line:
<div id="juicebox-container">
... to:
<div id="juicebox-container" style="margin-left: -250px;">
The alternative would be to adjust the #body <div>'s CSS to accommodate the gallery and this would require knowledge of CSS and a better understanding of the layout of your web page (or, at the very least, some trial and error).
Even if you don't follow everything in this post, just try making the change to the <div id="juicebox-container"> line and hopefully your gallery will appear in the correct position on your web page.
I hope this helps.