Why is there a little line there?

Question

I am suspecting my error here has something to do with the shadow around my nav bar. There is a little grey line underneath it which is not on the original image at all. I can't figure out how to get rid of it, and when you have the margins set to 0 between it and the picture below it has a little gap inbetween where the line is.

CSS:

.wrap {
width:90%;
background-image: url(images/navbarbackground.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 20px rgba(0,0,0,0.3);
padding:0px;
font-family:minecrafter;
}

.wrap:after{
content:" ";
clear:both;
display:block;
height:0;
visibility:hidden;
}

.wrap ul {
width:97%;
padding: 0;
}

.wrap li {
display:inline-block;
float: left;
width: 20%;
vertical-align:middle;
}

.wrap li a {
text-decoration:none;
background-color:#EEEEEE;
color:#666666;
padding:6px 0 6px 0;
border:1px solid #CCC;
border-right:1px solid #333;
border-bottom:1px solid #333;
display:block;
text-align:center;
}

.wrap h2 {
margin-top:10px;
margin-bottom:10px;
text-transform:uppercase;
color:#ffffff;
width:6em;
text-align:center;
line-height:1.0;
letter-spacing:.04em;
display:in line-block;
vertical-align:middle;
float:left;
}

.wrap h2 span {
display:block;
letter-spacing:.17em;
}

.navwrap {
margin-top:0px;
overflow:hidden;
padding-top:16px;
padding-bottom:0px;
margin-bottom:10px;
}

ul {
margin:0;
padding:0;
list-style:none;
}

.wtmu {
width:90%;
height:250px;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}

And the HTML:

    <div class="wrap">
        <h2 class="minecrafter">Miners <span>Union</span></h2>
            <div class="navwrap">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Forums</a></li>
                    <li><a href="#">Donate</a></li>
                    <li><a href="#">Apply</a></li>
                    <li><a href="#">Map</a></li>
                </ul>
            </div>
    </div>

Thanks!

Answer 1

Here is the http://jsfiddle.net/a47be5yf/ without a grey shadow, the bar is either in the image os the div is a bit larger than the original image:

.wrap {
width:90%;
background-image: url(images/navbarbackground.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 20px rgba(0,0,0,0.3);
padding:0px;
font-family:minecrafter;
height: 100px; /* or other */
}