resposive boxes display issues

[i can spell html5!]

am doing the bread traversy responsive video and ran into an issue. i write the code nearly exactly same except of course for the minor changes relevent to my page.

anyways the three boxes are displaying way down the page and not just under the top menu as i want them too. so heres the code and any help appriciated.

<section id="boxes">
<div class="container">

<div class="box"> 
<img src="hw.jpeg">
<h3>Homework Channel</h3>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise </p>
</div>
<div class="box">
<img src="ak.jpg">
<h3>Ace-King</h3>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise </p>
</div>
<div class="box">
<img src="charts.jpeg">
<h3>CHARTS</h3>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise </p>
</div>

</div>
</section>

#boxes{
  margin-top: 10px;
}

#boxes .box{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;
}

#boxes .box img{
      width:90px; 
}

[shaili_shah]

You can use the bootstrap classes for that.

Refer this code : https://jsfiddle.net/x2hwjz36/

Hope it helps you.