how do you re-position nanogallery?

[hazemati]

So, I'm having some issues moving nanogallery to another location on the page. My code is below. When I reposition it, The entire gallery dissapears. Can someone please help me?

  #nanogallery2{
position: fixed;
left: 20%;
top:20%;
width:100vw;
height:100vh;
}
</style>
<h3>
  nanogallery2 - configure the lightbox toolbars (HTML markup method)
  <a href="https://nanogallery2.nanostudio.org/" target="_blank">[more...]</a>
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">          

            <!-- jQuery -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

            <!-- nanogallery2 -->
            <link  href="https://unpkg.com/nanogallery2@2.4.2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
            <script  type="text/javascript" src="https://unpkg.com/nanogallery2@2.4.2/dist/jquery.nanogallery2.min.js"></script>
 <!-- nanogallery2 -->
<link  href="" rel="stylesheet" type="text/css">
<script  type="text/javascript" src=""></script>

</h3>
<div id= "album">
  <div id="nanogallery2"
      // gallery configuration
      data-nanogallery2 = '{ 
        "itemsBaseURL":     "https://nanogallery2.nanostudio.org/samples/", 
        "viewerToolbar":    {
               "standard":  "label, shareButton",
               "minimized": "minimizeButton, label, fullscreenButton, downloadButton, infoButton" },
         "viewerTools":      {
               "topLeft":   "label",
               "topRight":  "downloadButton, zoomButton, fullscreenButton, closeButton" }   
      }'
    >
    <!-- content of the gallery -->
    <a href="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg" data-ngthumb="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg">Berlin 1</a>
    <a href="https://images.pexels.com/photos/34231/antler-antler-carrier-fallow-deer-hirsch.jpg?cs=srgb&dl=animal-antler-deer-34231.jpg&fm=jpg" data-ngthumb="https://images.pexels.com/photos/34231/antler-antler-carrier-fallow-deer-hirsch.jpg?cs=srgb&dl=animal-antler-deer-34231.jpg&fm=jpg">Berlin 1</a>
  </div>
</div>