float only one part in a section/div - css

Question

I have a section in html page whose max width is set by a container. The heading and two columns in the section aren't floated. only the columns are floated left while the heading is center text aligned. Because of this the border that I put for the section wraps around the heading. Because of this some sections of page after this is being mis aligned. Is there a way I can fix it?
<section class="carousel freedom container"> <!--Freedom section -->
<h1> This is the heading </h1>
<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
</section> <!--End of Freedom carousel -->
Fiddle link: http://jsfiddle.net/7khffLsm/

Answer 1

JSFiddle - DEMO
You could use display: inline-block; to .left-col, .right-col and remove float: left;
CSS:
.container {
max-width:1024px;
margin: 0 auto;
}
.left-col, .right-col {
list-style: none;
width: 45%;
display: inline-block;
margin: 0;
padding: 0;
}
.two-col li {
padding-left: 30px;
margin-top: 20px;
margin-left: 30%;
}
.carousel h1 {
font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
font-size: 20pt;
color: #252525;
font-style: normal;
text-align: center;
line-height: 24pt;
letter-spacing: 0em;
}
.carousel.freedom {
border: 2px solid;
}
HTML:
<section class="carousel freedom container">
<!--Freedom section -->
<h1> This is the heading </h1>
<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
</li>
<li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
</li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
</li>
<li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
</section> <!--End of Freedom carousel -->