When using a box-shadow, it is important to note that it appears outside of the border. If the box-shadow is applied to the body element and the body completely fills or even overflows the screen (filling the html element), the box-shadow may be cut off. This is because the box-sizing property only includes the content area, padding, and border, but not margins and box-shadows.
In this snippet area, the width is less than the 800px defined for the body, which already extends the width of the viewport (snippet area). Additionally, the height is more than the default height of the snippet area.
However, if the body element is made narrower than the screen or the html element, and some padding-bottom is applied to the html element, there will be space for the box-shadow on the body:
html {
padding-bottom: 6px;
}
body {
font-size: 87.5%;
width: 550px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en>
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li><a href="Products/Props.html">Props</a></li>
<li><a href="Products/Costumes.html">Costumes</a></li>
<li><a href="Products/Special_effects.html">Special Effects</a></li>
<li><a href="Products/Masks.html">Masks</a></li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>