Why isn't the margin I set being applied to my elements?

Here’s my code solution. All the comments helped but the last thing I finally realized I was missing, was the bottom margin under the purple box…

#teal {
background-color: #A8D0DB;
padding: 0 50px;
margin: 100px;

#purple {
background-color: #414073;
padding: 50px 50px;
margin: 100px 100px 50px;