A Juicebox gallery is essentially just a <div> container, and it will appear on your web page at the dimensions you give (via the galleryWidth and galleryHeight options in the embedding code) and wherever you put the <div id="juicebox-container"></div> in your web page's code.

It sounds like you might be trying to embed a gallery into a page with a complex layout and the gallery dimensions you are currently using might not be suitable for your page layout.
If you are not already doing so, try using a galleryWidth of 100% (so that the gallery fills its parent container's width) and a fixed galleryHeight such as 600px. (When using a percentage height, you would need to make sure that the gallery's parent container has a height set via CSS, otherwise Juicebox may not be able to determine what its actual height should be a percentage of.)

If this does not help, then please post back with the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further. (It sounds like you may need to either move your <div id="juicebox-container"></div> container to a different location in your web page or change your gallery's dimensions.)

If you already have a file named 'index.html', then you'll need to take care not to overwrite it with the gallery's own 'index.html' file.
There are 3 options:
(1) Rename the gallery's 'index.html' file before you upload it to your web server (to ensure there are no duplicate filename collisions).
(2) Delete the gallery's 'index.html' file. This file is required only if you want to display the gallery on a web page of its own. If you are embedding your gallery into an existing web page alongside other content, then the gallery's own 'index.html' file is redundant and can safely be deleted.
(3) Use the baseUrl method of embedding documented here. This allows you to upload the entire gallery folder (not just the contents) to your web server so there will be no chance that the gallery's 'index.html' file will overwrite any similarly named files that already exist on your server.

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.

The gallery cannot be positioned on your web page using controls within the gallery itself. The position of the gallery is dependent on where you place the gallery's container within your page's code (in relation to all other containers on your page) and what CSS positioning rules have been applied to the elements on your page.

The suggestion in my post above should solve this problem.
When you originally entered your gallery's embedding code into your web page, you entered the line:

<div id="juicebox-container">

Change this manually to:

<div id="juicebox-container" style="margin-left: -250px;">

... and your gallery should shift over to the left (by 250px) to where you want it to be.

Alternatively, add the following to the foot of your 'style.css' file (it will do the same thing: shift your gallery over to the left by 250px).

#juicebox-container {
    margin-left: -250px;
}