Box Shadow working once on site, but not again

Question

Here's the CSS I'm using.

.hentry {
    padding: 40px 0;
    max-width: 840px;
    margin: 0 auto;
    background-color: #fff;
}
.hentry:before {
    box-shadow: -15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.hentry:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.widget-area {
    margin: 0 auto;
    max-width: 840px;
    width: 100%;
    background-color: #fff;
    border-top: #cd0a2b solid 5px;
}
.widget-area:before{
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.widget-area:after{
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.site-info {
    margin: 0 auto;
    max-width: 840px;
    padding: 30px 0;
    width: 100%;
    border-top: #cd0a2b solid 5px;
    background-color: #fff;
}
.site-info:before {
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.site-info:after {
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}

And the HTML

<article id="post-2" class="post-2 page type-page status-publish hentry">/article>

<div class="widget-area masonry" style="position: relative; height: 424px;"></div>

<div class="site-info"></div>

But for whatever reason the box shadow is only working on the widget-area. I've been on this for a few hours and can't spot anything wrong, but equally, can't work out how to make it work.

The box shadow code is originally from this Jfiddle http://jsfiddle.net/Qq5tQ/

Any ideas?

Edit: Solution

Right! I've fixed it. The solution was @Pete's using position: relative;, but it needed a bit more than that. For whatever reason, all of the box-shadow classes needed content: " "; on them, which was fine, except all of my afters were missing top: 0;.

After adding that in, it was simply a little bit of polishing to get my .site-info to work. Again, for reasons I do not fully understand, it about five pixels off the top (probably a padding issue I created earlier) but that was fixed with by altering the top and height, as seen below.

.site-info:before {
box-shadow: -15px 0 15px -15px inset;
height: 106%;
content: " ";
left: -15px;
position: absolute;
top: -5px;
width: 15px;
}

.site-info:after {
box-shadow: 15px 0 15px -15px inset;
height: 106%;
content: " ";
position: absolute;
right: -15px;
top: -5px;
width: 15px;
}

Thanks for all the help. I couldn't have done it without you both.

Answer 1

you don't have an item called .entry-header this needs to be changed to .hentry and you need to add position:relative to .site-info, .hentry and .widget-area