CSS / Div container margins issue

Question

I have a container div set to a fixed position at top of page and several relative position divs scrollable within the container. I can set margin left, right and bottom. But the top margin is ignored and runs up against the top of the container. What am I doing wrong here?

#container {
position: fixed;
width: 32rem; 
height: 32rem;
background-color: #000000;
overflow: hidden;
}

#div1 {
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem; 


<div id="container">
<div id="div1"></div>
</div>

Answer 1

You need to add overflow:hidden and change height:22em in #div1

I think you want something like this and I hope it will helps you.

#container {
  position: fixed;
  width: 32rem; 
  height: 32rem;
  background-color: #000;
  overflow: hidden;
}


#div1 {
    height: 22em;
    margin: 5rem 1rem;
    overflow: hidden;
    position: relative;
    width: 30em;
    color:#fff;
}

<div id="container">
	<div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 2

Is this the desired output? http://jsfiddle.net/t9rkpspu/

#container {
  position: fixed;
  width: 32rem; 
  height: 32rem;
  background-color: #000000;
  overflow: hidden;
}

#div1 {
  color: white;
  position: relative;
  width: 30em;
  height: 40em;
  margin: 5rem 1rem 5rem 1rem; 
}