Html container setup

Question

I have the following container setup where

• the entire page is split in half, left and right
• the left container is split into two separate containers, an upper and a lower one

The lower one will have dynamic content in the future but I used a spacer to keep the layout and added a content container to the lower one.

The problem is that if I apply a margin-top to the content container inside the lower container, the margin gets applied to the lower spacer creating a gap between the upper and lower. I can't wrap my head around this and when I rebuild this in a blank page with just the up and down split in a container it worked fine.

* {
  margin: 0px;
  padding: 0px;
}

#left {
  width: 50%;
  height: 100%;
  float: left;
  background-color: #333;
}

#upper-spacer {
  width: 100%;
  height: 20%;
  background-color: #f00;
}

#lower-spacer {
  width: 100%;
  height: 80%;
  background-color: #28a87a;
}

#lower-content {
  width: 90%;
  margin: auto;
  margin-top: 20px;
  height: 80%;
  background-color: #1d77c6;
}

#right {
  width: 50%;
  height: 100%;
  float: right;
  background-color: #3c3c3c;
}

<div>
  <div id="left">
    <div id="upper-spacer"></div>
    <div id="lower-spacer">
      <div id="lower-content"></div>
    </div>
  </div>
  <div id="right"></div>
</div>

I am not only looking for and easy fix but more for a explanation.