Containers do not fit inside a big one - css

Question

The problem is that #lesson containers do not fit inside the #container. How can I make that only 3 containers fit into one column? CSS ninjas, I need your help :)
My CSS: #container - main container, #first - green container, #lesson- gray divs.
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
HTML:
<div id="container">
<div id="first">
<tpl for=".">
<div class="lesson"; >
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</tpl>
</div>
<div id="second">
</div>
</div>

Answer 1

For fitting the containers on the big one you just need to remove the height 100% from the id first
#first { /* height: 100% */ }

Answer 2

Codepen http://codepen.io/noobskie/pen/dYGLeo
It seems to be working fine for me here. Are you sure you dont have any other css being applied and overwriting rules somewhere?
HTML
<div id="container">
<div id="first">
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</div>
</div>
CSS
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}