The "Front" of the gallery that you describe is the Splash Page which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content.
When the Splash Page is tapped, the gallery is expanded to fill the browser viewport (giving the images more room to be displayed).
Please see the Screen Modes section of the Gallery Tour for more information on the Splash Page.

By default, the Splash Page uses the first image in the gallery.
In your case, the image is offset (and not filling the Splash Page container as expected) because of some custom CSS on your gallery's embedding page.
On line 665 of your 'style.css' file ('/wordpress/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css') is the following code:

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    height: auto;
    max-width: 100% !important; /* Fluid images for posts, comments, and widgets */
}

The max-width CSS rule is being applied to all images (all HTML <img> tags) within the specified CSS classes and this includes the Splash Page image. The Splash Page image has no option but to inherit this custom CSS rule.
Removing the !important declaration from the end of this custom CSS rule should be enough to reposition the Splash Page image correctly but, if other images on your web page require the !important declaration , then the best course of action would be to apply the max-width CSS rule to only those images on your web pages that require it through use of further CSS selectors (ids or classes).

Incidentally, you can choose to not use the Splash Page if you like by setting showSplashPage="NEVER".
If you continue to use the Splash Page (recommended for small screen devices), then you can configure the Splash Page (for example by choosing a specific image to be used) via the Splash Page configuration options.

I hope this helps.

The custom CSS is affecting the position of the image within the Splash Page container and the only way to counteract this is with CSS. The custom CSS will be applied to whatever image you choose to use for the Splash Page, no matter what shape or size it is.
Additionally, if your gallery is responsive, then the aspect ratio of the Splash Page will be dependent on the dimensions of the browser viewport being used to view the gallery so you have no way of knowing what shape and size the Splash Page will actually be for any given user (so there is no ideal size to use for the Splash Page image).

The quickest and easiest solution to the problem is to ensure that the max-width: 100% !important; CSS rule is not applied to the Splash Page image by removing the !important declaration from the rule. (This will likely not adversely affect other images on your web page at all.)

However, if you do not want to change the Jetpack CSS, then you'll need to change the Juicebox CSS instead.
Open the plugin's 'wp-juicebox/jbcore/classic/theme.css' file in a plain text editor.
Search for max-width: none; and replace all instances (there are four) to max-width: none !important.
In the current version of Juicebox-Pro (v1.5.1), they are on lines 119, 197, 247 and 696.

Otherwise, you could just add the following to the end of the 'theme.css' file:

.juicebox-gallery img, .jb-idx-thb-list .jb-idx-thumb img, .jb-dt-main-frame img, .jb-idx-thumbnail-container .jb-splash-holder img {
    max-width: none !important;
}

As the 'theme.css' file is loaded in your web page after the 'style.css' file, the !important declarations in the 'theme.css' file will override the !important declaration in the 'style.css' file

I hope this make sense and helps you to resolve your problem.