Alright, you’re killing me with these images with text in them 
Oh - I thought that giving you a presentation of the problem in this manner - here is the code - here is the result - was the clearest way to illustrate the problem - a real life example of the issues that I am having. What should I be doing?
Sure, that’s great, but half the time I can’t read the text thats in the image 
. That and it’s not copyable, quotable, or searchable. If you have an explanation and/or code, it would be extremely helpful to type it out in the forum as text and not include it in an image. Images dispersed throughout that text is fantastic, just so long as the text itself isn’t in the image.
OK - point taken and I will endeavour to be a good little poster to the forum in the future. I was hoping to replicate my original issue with the box-shadow rule but now find that before I can do that, I have another problem that needs to be addressed first - namely - I have 2 identical images. I thought that to mark them as different for purposes of CSS, I gave the lower one an - id=“lemming” - but that differentiator does not seem to work. Changes made in CSS under the - lemming - id, don’t come across in the browser. I can’t figure out why. Once I do, I’ll go on to the box-shadow issue. Here’s the code - I seem to have issues with copy / pasting my code as well but I’ll copy from VSC, paste into this box, use the - preformatted text - button and hope that it comes through as - copyable, quotable and searchable. I have used the Format Document (a newly learned feature for me) feature so hopefully my code is viewed more easily than previously.
<html lang="en">
<head>
<title>Messing With Page Layouts</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,wght@1,300&display=swap"
rel="stylesheet">
<style>
h1 {
text-align: center;
font-family: 'Indie Flower', cursive;
background-color: rgba(240, 255, 253, 0.322);
}
h2 {
text-align: left;
font-family: 'Open Sans Condensed', sans-serif;
}
p {
text-align: justify;
}
.links {
margin: 50px;
}
.overall {
border: 5px solid rgb(187, 76, 76);
border-radius: 15px;
margin: 10px 5px;
padding: 4px;
}
.allwords {
padding: 10px;
}
img {
box-shadow: 10px 10px 10px 10px rgba(27, 221, 147, 0.408);
margin: 100px;
position: relative;
top: 100px;
right: 30px;
left: 200px;
}
.lemming {
box-shadow: 20px 35px 30px 40px rgba(27, 221, 147, 0.408);
margin: 100px;
position: relative;
top: 200px;
right: 30px;
left: 200px;
}
</style>
</head>
<body>
<section class="overall">
<div>
<h1>Road Construction Equipment</h1>
<h2>Specialized Winter Usage</h2>
<p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to
international competitors, in large part because there’s been little direct government support in
Canada, industry executives say.</p>
</div>
<div>
<a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles
Fipke</a>
<a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
</div>
</section>
<footer>
<img src="https://image.sciencenorway.no/1564739.jpg?imageId=1564739&width=480&height=274"
alt="cute little lemming">
<img id="lemming" src="https://image.sciencenorway.no/1564739.jpg?imageId=1564739&width=480&height=274"
alt="cute little lemming">
</footer>
</body>
</html>You’re using “.lemming” in your css which is looking for the class lemming, not the id. For an id your css needs to use “#lemming” 
Arrrgh ! ! Would you believe that I knew the answer to that ? I must be working too long at this at one sitting not to have caught this myself - but thanks for pointing it out because I sure couldn’t see it when I was trying to get at the cause of the problem. So on to part 2 at last - I’ll copy the “corrected code”
<html lang="en">
<head>
<title>Messing With Page Layouts</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,wght@1,300&display=swap"
rel="stylesheet">
<style>
h1 {
text-align: center;
font-family: 'Indie Flower', cursive;
background-color: rgba(240, 255, 253, 0.322);
}
h2 {
text-align: left;
font-family: 'Open Sans Condensed', sans-serif;
}
p {
text-align: justify;
}
.links {
margin: 50px;
}
.overall {
border: 5px solid rgb(187, 76, 76);
border-radius: 15px;
margin: 10px 5px;
padding: 4px;
}
.allwords {
padding: 10px;
}
img {
box-shadow: 10px 10px 10px 10px rgba(27, 221, 147, 0.408);
margin: 100px;
position: relative;
top: 100px;
right: 30px;
left: 200px;
}
#lemming {
box-shadow: 20px 35px 40px 40px rgba(27, 221, 147, 0.408);
margin: 100px;
position: relative;
top: 200px;
right: 30px;
left: 200px;
}
</style>
</head>
<body>
<section class="overall">
<div>
<h1>Road Construction Equipment</h1>
<h2>Specialized Winter Usage</h2>
<p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to
international competitors, in large part because there’s been little direct `Preformatted text`government support in
Canada, industry executives say.</p>
</div>
<div>
<a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles
Fipke</a>
<a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
</div>
</section>
<footer>
<img src="https://image.sciencenorway.no/1564739.jpg?imageId=1564739&width=480&height=274"
alt="cute little lemming">
<img id="lemming" src="https://image.sciencenorway.no/1564739.jpg?imageId=1564739&width=480&height=274"
alt="cute little lemming">
</footer>
</body>
</html>
so the question now is - looking only at the box shadow component for the 2 images, a +ve value for X and Y should mean that the shadow falls to the Right and Bottom of the image. This holds true for the top image where we have
box-shadow: 10px 10px 10px 10px rgba(27, 221, 147, 0.408);
but for the bottom image where we up the radius-blur and radius-spread as shown
box-shadow: 20px 35px 40px 40px rgba(27, 221, 147, 0.408);
the shadow spills out on all aspects of the image - top, bottom, left, right. How come the +ve X and Y values don’t serve to constrain the shadow to the Right and Bottom in this case?
Of course! I still do this. And this time won’t be the last. But the next time it happens you’ll now be able to think back to this moment and realize what the problem might be!
As for the shadow, the x and y are just an offset shift. They don’t constrain anything. They simply take the rendered shadow and move it left, right, up, and/or down. Depending on the other shadow settings, the shadow can still be large enough to bleed out from all edges.
You might want to try googling a css shadow tool. I bet someone out there made a tool that lets you easily change shadow settings to more easily visualize what’s going on.
Good - I am now OK with the subtleties of shadowing. I thought I was missing something when the shadows appeared on the Top and Left but no - that was normal for the values given.