Looks like in JSFiddle you're applying background to the body tag. That will not work as it will apply the background twice is jsfiddle which uses iframe to render your content - that is why it appears as if the box-shadow is messed up however it is not.
Try removing body tag and body css
instead you can have HTML like this:
<div class="outer-container">
<div id="header">
<div id="logo"> <a href="<?=base_url(); ?>"><img src="http://pierdevara.com/demo/907pass/assets/img/907pass.png" /></a>
<div id="navBtn"></div>
</div>
<div id="navlist">
<ul>
<li><a href="coupons">Coupons</a>
</li>
<li><a href="trans">Buy / Activate</a>
</li>
<li><a href="about">About</a>
</li>
</ul>
</div>
</div>
And the body css converted to :
.outer-container {
background: url(http://pierdevara.com/demo/907pass/assets/img/bg_grassy.jpg) no-repeat center center scroll;
background-width: 2000px;
background-height: 1300px;
height:1300px;
}