纯CSS3响应灯箱出现半屏幕

Question

使用纯CSS和HTML创建LightBox效果，没有JS。图像出现，但在屏幕的右侧，中途切断，部分位于导航栏下方。屏幕的一半在图像后面加阴影。

看起来它会起作用，除了它偏离中心并在导航后面。从手头的代码，有什么看起来可能会这样做？如果有必要，我很乐意发布更多代码。谢谢！

    /*Eliminates padding, centers the thumbnail */

    body,

    html {

      padding: 0;

      margin: 0;

      text-align: center;

      float: left;

    }

    /* Styles the thumbnail */

    a.lightbox img {

      height: 150px;

      border: 3px solid white;

      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

      margin: 94px 20px 20px 20px;

    }

    /* Styles the lightbox, removes it from sight and adds the fade-in transition */

    .lightbox-target {

      position: fixed;

      top: -100%;

      width: 100%;

      background: rgba(0, 0, 0, 0.7);

      width: 100%;

      opacity: 0;

      -webkit-transition: opacity .5s ease-in-out;

      -moz-transition: opacity .5s ease-in-out;

      -o-transition: opacity .5s ease-in-out;

      transition: opacity .5s ease-in-out;

      overflow: hidden;

      clear: both;

    }

    /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

    .lightbox-target img {

      margin: auto;

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      max-height: 0%;

      max-width: 0%;

      border: 3px solid white;

      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

      box-sizing: border-box;

      -webkit-transition: .5s ease-in-out;

      -moz-transition: .5s ease-in-out;

      -o-transition: .5s ease-in-out;

      transition: .5s ease-in-out;

    }

    /* Styles the close link, adds the slide down transition */

    a.lightbox-close {

      display: block;

      width: 50px;

      height: 50px;

      box-sizing: border-box;

      background: white;

      color: black;

      text-decoration: none;

      position: absolute;

      top: -80px;

      right: 0;

      -webkit-transition: .5s ease-in-out;

      -moz-transition: .5s ease-in-out;

      -o-transition: .5s ease-in-out;

      transition: .5s ease-in-out;

    }

    /* Provides part of the "X" to eliminate an image from the close link */

    a.lightbox-close:before {

      content: "";

      display: block;

      height: 30px;

      width: 1px;

      background: black;

      position: absolute;

      left: 26px;

      top: 10px;

      -webkit-transform: rotate(45deg);

      -moz-transform: rotate(45deg);

      -o-transform: rotate(45deg);

      transform: rotate(45deg);

    }

    /* Provides part of the "X" to eliminate an image from the close link */

    a.lightbox-close:after {

      content: "";

      display: block;

      height: 30px;

      width: 1px;

      background: black;

      position: absolute;

      left: 26px;

      top: 10px;

      -webkit-transform: rotate(-45deg);

      -moz-transform: rotate(-45deg);

      -o-transform: rotate(-45deg);

      transform: rotate(-45deg);

    }

    /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

    .lightbox-target:target {

      opacity: 1;

      top: 0;

      bottom: 0;

    }

    .lightbox-target:target img {

      max-height: 100%;

      max-width: 100%;

    }

    .lightbox-target:target a.lightbox-close {

      top: 0px;

    }

<div id="gravel-button">
  <a class="lightbox" href="#gravel-1">
    <h7>Photo &amp; Info</h7>
  </a>
</div>
<div class="lightbox-target" id="gravel-1">
  <img src="http://www.sbsg.com/wp-content/uploads/2010/02/58minus.jpg">
  <a class="lightbox-close"></a>
</div>