boxes with headings

The HTML:
 <div id="holderdiv">
   <div> <!-- a bordered box -->
     <h2>1st Box</h2>
     <p>Just a typical paragraph</p>
   </div>
   <div> <!-- a bordered box -->
     <h2>2nd Box</h2>
     <p>Just a typical paragraph</p>
   </div>
 </div>
 
The CSS:
#holderdiv {width: 250px;}
 
#holderdiv div { /* Selects any div inside #holderdiv */
  margin: 0 10px 10px 10px; /* moved from paragraph */
  color: #363636;
  background-color: #eec;
  border: 1px solid black;
}
 
#holderdiv p {margin: 5px;} /* changed from padding */
#holderdiv h2 {
  margin: 0;
  background-color: #7a7;
  color: white;
  font-size: 0.9em;
}