Gap in CSS shadows between two elements

Question

as a warning, i'm not really used to using html and css. But i have to deal with it for a friend.

I got two divs on top of each other, and want a box-shadow for them.

<div id="div_1></div>
<div id="div_2></div>

And the css

#div_1 { box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);)
#div_2 { box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);)

This basicaly worked, but the shadow has a small gap where they meet. I can't seem to grasp how to get rid of that, and i don't really understand the answers i found with google.

Here is a fiddle with the complete HTML & CSS

The gap is on the right side.

https://jsfiddle.net/w3kfw0wn/

The head is a picture, so don't mind that it doesn't have a border.

Any help would be appreciated.

Answer 1

As suggested by andib, the best solution is to rearrange the layout, and get a single shadow

The content is extending under the header, and all the shadow is on it

#navigation {
  width: 178px;
  height: 150px;
  float: left;
  clear: both;
  background-color: #b5ebb9;
  border-bottom-left-radius: 15px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-style: solid;
  border-color: #000;
  border-right-width: 0px;
  border-top-width: 0px;

}

#wrapper {
  width: 865px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

#content {
  width: 636px;
  height: 100%;
  float: right;
  padding: 15px;
  text-align: justify;
  padding-top: 10px;
  background-color: #FFF;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-top-width: 0px;
  border-bottom-width: 2px;
  border-color: #000;
  border-style: solid;
  display: block;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  margin-right: 15px;
  margin-bottom: 15px;
      padding-top: 107px;
    margin-top: -107px;
    border-radius: 15px;
}

#head {
  width: 850px;
  height: 110px;
  background-color: #699;
  border-top-left-radius: 50px 50px;
  border-top-right-radius: 10px;
  z-index: 10;
  position: relative;
}

.menu li {
  list-style-type: none;
  display: block;
  margin-left: -20px;
}

  <div id="wrapper">
    <div id="head"></div>
    <div id="navigation">
      <ul class="menu">
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
      </ul>
    </div>
    <div id="content">
      #content#
      <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>

Answer 2

Its very simple, First you need to understand box-shadow.

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

you are setting blur to 5px which means there needs to be a gradient between transparent and your color.

So to get rid of that white part set blur to 0.

box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75);