Background Color is affecting box-shadow - html

Question

So here's my problem: I have a big container div, and a div inside that container. the container has a box-shadow on it that is black. When I set the inner div's background color to black, you can't see the box-shadow. I thought maybe this was an illusion caused by the eye, but taking a closer look you can see the pixel differentiation.
Example image.
Here is a more clear depiction of the problem:
Yet another example image
Raw code incoming!
HTML: (The div#footerContainer part is pretty much the important part)
<div id="bodyContainer">
<div id="menuContainer">
<div id="menuElements" class="center">
<div class="menuElement underlineHover" color="#FF0E0E">Home</div>
<div class="menuElement underlineHover" color="#13DB13">Services</div>
<div class="menuElement underlineHover" color="#1792BB">Photo Gallery</div>
<div class="menuElement underlineHover" color="#E4146B">Why Use Fox Foliage?</div>
<div class="menuElement underlineHover" color="#FF9616">Contact</div>
</div>
</div>
<div id="barSpacer" style="margin: 0 auto 20px"></div>
<div id="imageContainer">
<img src="images/image1.jpg"/>
<div id="title">
<div class="center">
<p class="spaced">Fox Foliage</p>|<p class="spaced">352-949-2481</p></p>
</div>
</div>
</div>
<div id="barSpacer"></div>
<div id="contentContainer">
<?php include("content.php") ?>
</div>
<div id="barSpacer"></div>
<div id="footerContainer">
</div>
CSS (Container DIV):
div#bodyContainer{
max-width: 1000px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 30px 2px black;
}
CSS (Footer DIV):
div#footerContainer {
height: 40px;
width: 100%;
background-color: black;
color: white;
}
The whole goal is to make sure the box-shadow is the same consistency all the way around.