title: How come my div isn't appearing above my image?
body: <p>Been troubleshooting this for hours. There's got to be a simple reason or solution that I'm not seeing.</p>
  <p>I just want to have an inset box-shadow over the top of my image.</p>
  <p>Here is the code I have currently:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img-container {
      position: relative;
      margin: auto 0;
      max-width: 100%;
      max-height: 100%;
      box-shadow: 0 0  25px red inset;
      z-index: 2 !important;
  }
  
  .img-container img {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img-container"&gt; 
      &lt;img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="Photo of Self"&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>