Basic box-shadow troubleshoot

Very new to css. I want to give my header image and content a subtle shadow so it’s not flat with my background image. I’ve successfully done this with my header image with a simple:

.site-title img {
box-shadow: -1px 0px 18px 4px black;
}

However, when I try to create a similar box-shadow around my main content, it seems like the shadow is displaced at the top. The shadow starts a few pixels above where it should.

I thought I’d ask the forums before I start messing too much with things I know very little about. Here’s what my content css looks like:

.site-content {
    clear: both;
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    color: #333;
    position: relative;
    box-shadow: -1px 0px 18px 4px black;
}

https://www.nickborges.org

Thank you very much in advance for any advice!

(edit: I just noticed that other MAIN pages have correct shadow, it’s just my home page and individual blog posts that have that top floating shadow. Hope that helps.)