I'm having some troubles with the 'float' in css. I have a wrapper div with a width of 960px.I want to add 5 child-div in it with the width of 960 / 5 = 192px. And this is what I've got: https://i.stack.imgur.com/R6bsw.png
This is my lines of code. Can anyone tell me what's wrong with them?
HTML
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</section>