Box-shadow not appearing OVER a div with lower z-index

So guys, I've here a header: As you can see, the box-shadow works just fine. However, putting a background-color on the content `<div>` yields this: Visually, the `box-shadow` was covered by the `background-color`. The content `<div>` has lower `z-index` value than the header though. How can I make the `box-shadow` appear over the `<div>` to make it seem like the content is under the header? If this will help, here is the CSS for both markups: ``` header{ /* the header, obviously */ background: #fee; height: 60px; padding: 40px 20px 0px 20px; border-bottom: 5px solid #f53301; -webkit-box-shadow: 0 12px 16px -6px gray; -moz-box-shadow: 0 12px 16px -6px gray; box-shadow: 0 12px 16px -6px gray; border-radius: 20px 20px 0px 0px; z-index: 9999; } #content-inside { /* the content */ padding:20px; z-index:1; /* changed this to -1 but it still didn't work */ background:white; border:1px solid black; } ``` I hope someone can help me with this. Cheers!