Box shadow not displaying properly - html

Question

Why is the box shadow not displayed correctly in here:
.panel:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.3);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.3);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.3);
transition: all 200ms ease-in;
transform: scale(1.3);
}
Link to JsFiddle.
On some of the boxes it does not display to the right hand side.

Answer 1

If you want the z-index to work consistently, you need to set position: relative.
html,
body {
height: 100%;
width: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggXAAmiCIAEgQAAE4FBbECyZcAAAAASUVORK5CYII=) #222;
}
h1 {
color: white;
text-align: center;
}
.container {
width: 80%;
height: 80%;
margin: 0 auto;
border: red;
color: white;
}
.panel {
position: relative; /* ADD THIS */
float: left;
min-width: 30%;
max-width: 30%;
min-height: 30%;
max-height: 30%;
display: flex; /* testing this for aligning text */
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
background-color: #FF6961;
margin: 1%;
border: white;
color: #222;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
-index: 1;
}
.panel:hover {
box-shadow: 0px 0px 150px 0px white;
z-index: 2;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<h1>
Title Here
</h1>
<div class="container">
<div class="panel">
<span>
Forums
</span>
</div>
<div class="panel">
<span>
News
</span>
</div>
<div class="panel">
Leaderboards
</div>
<div class="panel">
About
</div>
</div>