Pure CSS3 Responsive Lightbox Appears Half-Off Screen - html

Question

Created a LightBox effect using pure CSS and HTML, no JS. The image appears, but on the right side of the screen, halfway cut off, and partially underneath my Nav bar. Half of the screen is shaded behind the image.
It appears like it would work, aside from it being off-center and behind the navigation. From the code at hand, is there anything that appears it could be doing this? I'd be happy to post more code if necessary. Thank you!
/*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 & 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>