Why doesn't my box-shadow overlap correctly on these flex children?

Question

So basically the design of the page should look like this:

And when I try to implement through HTML and CSS:

as you can see here the Navbar's box shadow overlaps the header.

*{
  margin: 0;
}
#main-container {
  display: flex;
  background-color: ##f3f3f3;
  width: 100%;
  height: 100%;
}
.main-container-right {
  width: 100%;
  height: 800px;
  position: relative;
}

#main-nav {
  width: 100px;
  height: 800px;
  background-color: #f3f3f3;
  position: sticky;
  display: flex;
  flex-direction: column;
  border: 1px solid #c4c4c4;
  box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.25);
  z-index: 0;
}
#header {
  display: flex;
  height: 30px;
  width: 100%;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
  position: sticky;
}

<div id="main-container">
  <nav id="main-nav">
  </nav>
  <div class="main-container-right">
    <header id="header">
    </header>
  </div>
</div>

I tried to add z-index and positioning the elements, it didn't seem to work. Is there any fix for it?

Here is the problem in a CodePen: https://codepen.io/biljx/pen/rNzwwqd

EDIT: I couldn't fix the z-index problem but managed to get shadow like the original design by using drop-shadow instead of box-shadown filter: drop-shadow(0px 30px 10px rgba(0, 0, 0, 0.25) );

#main-nav {
  width: 100px;
  height: 800px;
  background-color: #f3f3f3;
  position: sticky;
  display: flex;
  flex-direction: column;
  border: 1px solid #c4c4c4;
  /*box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.25);*/
  filter: drop-shadow(0px 30px 10px rgba(0, 0, 0, 0.25) ); 
  z-index: 0;
}

Answer 1

I can't figure out why all these manipulations with z-index? The blocks are already in the correct order. But, as long as you have a transparent #header, the shadow of #main-nav will be visible. So just add a background color for the #header:

* {
  margin: 0;
}

#main-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

.main-container-right {
  position: relative;
  width: 100%;
  height: 800px;
}

#main-nav {
  position: sticky;
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 800px;
  border: 1px solid #c4c4c4;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 10px 10px #0004;
}

#header {
  position: sticky;
  display: flex;
  height: 30px;
  width: 100%;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 4px #0004;
}

<div id="main-container">
  <nav id="main-nav">
  </nav>
  <div class="main-container-right">
    <header id="header">
    </header>
  </div>
</div>