Clearing divs not working - html

Question

I am struggling to clear 3 div in the correct manner I can do it by adding padding to the bottom of the wrapping div but that really isn't practical.
Demo of the problem
What do you think the best treatment is for this?
HTML
<section class="audience">
<div class="container">
<div class="audience_col1">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
<div class="audience_col2">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
<div class="audience_col3">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
</div>
</section>
CSS
.audience{
width: 100%;
background-color: #f6f5fa;
height: auto;
overflow:auto;
text-align:center;
padding: 20px 0 20px 0;
}
.audience_col1{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
.audience_col2{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
.audience_col3{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}

Answer 1

If I'm right in thinking what you're trying to accomplish, why not display the div elements inline?
Demo Fiddle
CSS
.audience {
width: 100%;
background-color: #f6f5fa;
text-align:center;
padding: 20px 0 20px 0;
font-size:0; /* <--- trick to prevent inline 'spacing' of multiline HTML */
}
.audience_col1, .audience_col2, .audience_col3 {
width: 33.33%;
height: 100px;
display:inline-block;
box-sizing:border-box;
padding: 20px;
font-size:14px; /* <--- revert font-size */
}

Answer 2

.audience{
display:block;
}
.audience_col1,
.audience_col2,
.audience_col3{
display:inline-block;
}

Answer 3

This is the CSS you should use if you want to work with float concept, else you can change the code and move ahead with the display: inline-block concept as shown on the other answer :-
Demo Fiddle
.audience{
background-color: #f6f5fa;
}
.container {
overflow: hidden;
text-align: center;
}
.audience_col1, .audience_col2, .audience_col3 {
width: 33.33%;
float: left;
box-sizing:border-box;
padding: 20px;
}