title: What is the main cause of box-shadow not to work
body: <p>Hello I have to been trying to search for a solution to my problem that is my box-shadow not working, I have seen other question on Stack Overflow that are similar but the all did not solve my problem can I please get some help</p>
  <p><strong>Code below is my React Component</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;../StyleSheet/MainDashBaordWindow.css&quot;;
  const HomeDashContent = () =&gt; {
    return (
      &lt;div className=&quot;DashBoardContent&quot;&gt;
        &lt;h1 className=&quot;DashBoardContent__header&quot;&gt;Welcome Back!&lt;/h1&gt;
        &lt;div className=&quot;DashBoarContent__mainWindow&quot;&gt;
          &lt;div className=&quot;mainWindow__cards left-card&quot;&gt;
            &lt;h2&gt;On Going Shipments&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mainWindow__cards right-card&quot;&gt;
            &lt;h2&gt;Finished Shipments&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default HomeDashContent;
  </code></pre>
  <p><strong>Code below is my stylesheet</strong></p>
  <pre><code>.DashBoardContent {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .DashBoardContent__header {
    font-weight: bolder;
    margin-bottom: 2em;
  }
  
  .DashBoarContent__mainWindow {
    display: flex;
  }
  
  .mainWindow__cards {
    background-color: #f5f5f5f5;
    padding: 4em 2em;
    height: 30vh;
    transition: transform 0.4s;
    box-shadow: 2rem 2.5rem 2rem solid lightslategray;
  }
  
  .mainWindow__cards:hover {
    transform: scale(1.1);
  }
  
  .left-card {
    margin-right: 5em;
  }
  
  .right-card {
    margin-left: 5em;
  }
  </code></pre>