Divs not nesting correctly inside section tag

Divs not nesting correctly inside section tag

I'm using the following HTML and CSS code to try and create a section with
3 divs inside of it, the problem is that even though the divs are inside
the section tag, in the web page they appear outside and below the section
element?
HTML code
<section id="content">
<div class="homebox">
<h3>Who I am</h3>
<p>Here is some text Here is some text Here is some text Here is some
text </p>
</div>
<div class="homebox">
<h3>What I do</h3>
<p> Here is some text Here is some text Here is some text Here is some
text Here is some text Here is some text </p>
</div>
<div class="homebox">
<h3>Where I do it</h3>
<p> Here is some text Here is some text Here is some text Here is some
text Here is some text Here is some text </p>
</div>
</section>
Here is the CSS code I'm using
#content {
color:#FFF;
margin-top: 20px;
width: 100%;
padding-left: 20px;
}
#content h3 {
color:#FFF;
font-size: 40px;
font-family: Impact, Arial, sans-serif;
margin:0;
font-weight: 100;
}
#content > .homebox {
float:left;
width: 28%;
padding: 0px 20px 20px; /* Top 0 padding, left and right 20px, bottom
20px padding */
margin-right: 18px;
text-align:center;
border-radius:40px;
background: #818181;
background: -moz-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center
center, 100%, color-stop(0%,rgba(234,211,0,0.6)),
color-stop(63%,rgba(255,255,255,0.22)),
color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%,rgba(255,255,255,0.22) 63%,rgba(255,255,255,0)
100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%,rgba(255,255,255,0.22) 63%,rgba(255,255,255,0)
100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%,rgba(255,255,255,0.22) 63%,rgba(255,255,255,0)
100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(234,211,0,0.6)
0%,rgba(255,255,255,0.22) 63%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#99ead300', endColorstr='#00ffffff',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.homebox > p {
margin: 0px;
color: #FFF;
font-family: Trebuchet MS, Arial, sans-serif;
}