Padding Around the Photo with the Magnific Popup Plugin?

Padding Around the Photo with the Magnific Popup Plugin?

The HTML:
  1.    <!DOCTYPE html>
  2.         <html>
  3.     <head>
  4.         <title></title>
  5.         <script src="jquery-2.1.1.min.js"></script>
  6.         <!-- Magnific Popup core CSS file -->
  7.         <link rel="stylesheet" href="magnific-popup/dist/magnific-popup.css">
  8.         <!-- Magnific Popup core JS file -->
  9.         <script src="magnific-popup/dist/jquery.magnific-popup.js"></script>
  10.         <script src="script.js"></script>
  11.     </head>
  12.     <body>
  13.     <h1>The Headline Tags Here</h1>
  14.     <div class="parent-container">
  15.         <a href="uploads/03d7ab9d92afe3e9c31b526d110ef101.jpg"><img src="thumbs/03d7ab9d92afe3e9c31b526d110ef101.jpg" width="100px" height="100px"/></a>
  16.         <a href="uploads/8c2950c88a2ad83515d8d0bc102ce391.jpg"> <img src="thumbs/8c2950c88a2ad83515d8d0bc102ce391.jpg" width="100px" height="100px" /></a>
  17.         <a href="uploads/7534d08e8024411157885c1243154f80.jpg"><img src="thumbs/7534d08e8024411157885c1243154f80.jpg" width="100px" height="100px" /></a>
  18.     </div>
  19.     </body>
  20.         </html>

The jQuery Script:

  1. $(document).ready(function() {
  2.     $('.parent-container').magnificPopup({
  3.         delegate: 'a', // child items selector, by clicking on it popup will open
  4.         type: 'image',
  5.         gallery:{enabled:true}
  6.         // other options
  7.     });
  8. });

Hello,

I have set up the magnific popup plugin, it worked great. Though I have around 80px of padding around the big sized photo and then the shadow does happen, which means the shadow does not happen directly at the sides of the photo.

Can anybody let me know how to get rid of the padding around the photo?


EDIT:

Here is an example. It is at default, which means I have done no modifications to it:
The Example