Clearing floating divs ( clear:both; not working ) - html

Question

I have a site that I am working on for a competition through school, and I am having an issue with clearing floating elements.
The site is hosted at http://www.serbinprinting.com/corey/development/
The area I am referring to is the list of ingredients toward the bottom of the page. I want the div it is contained in to adjust its height based on the content in the box, however I am going to have to columns that are currently floated, so the content is not sitting in the flow of the div.
I have tried adding an :after element with clear:both and display: block to the lists as well as the div it is contained in with no success. Can I achieve the two column layout without floating? Is there something I am doing incorrectly with the clears?
Here is the code surrounding the issue...
HTML
<section id="monthly_recipe">
<div class="content_container">
<div class="centered">
<img src="images/icons/bread41.png">
<h1>Gluten-Free Bread That Doesn't Suck</h1>
</div>
<div class="col-1">
<ul>
<li>4 cups Brown Rice Flour Blend </li>
<li>1 tablespoon xanthan gum</li>
<li>1 tablespoon gluten-free egg replacer</li>
<li>2 teaspoons salt</li>
<li>½ cup powdered milk</li>
<li>3 large eggs at room temperature</li>
<li>¼ cup butter at room temperature</li>
<li>2 teaspoons cider vinegar</li>
<li>? cup honey</li>
<li>1 package (2¼ teaspoons) active dry yeast (not INSTANT dry yeast)</li>
<li>2 cups warm water</li>
</ul>
</div>
<div class="col-2">
</div>
</div>
</section>
CSS
#welcome {
position: relative;
width: 100%; min-height: 500px;
background:url(../images/welcome.jpg);
background-size: cover;
}
#welcome h1 {
display: inline-block;
background: rgba(0,0,0,0.4);
color: #fff;
font-size: 4em;
font-weight: lighter;
font-family: 'Bitter', serif;
text-transform: uppercase;
margin: 60px 0 10px 0;
padding: 5px 10px 5px 10px;
}
#monthly_recipe {
position: relative; left: 0;
width: 100%; height: 500px;
background: #fff;
}
#monthly_recipe h1 {
font-size: 4em;
}
#monthly_recipe ul li {
list-style: none;
font-size: 1.5em;
color: #333;
}

Answer 1

Misread the question, I edited my answer
Remove the fixed height and add a :after pseudo class to your #monthly_recipe with these rules:
#monthly_recipe:after {
content: "";
display: block;
clear: both;
}

Answer 2

It seems that you are limiting the #monthly_recipe div from showing the full list by giving it a fixed height of 500px,
try this:
#monthly_recipe {
position: relative;
left: 0;
width: 100%;
background: #fff; }

Answer 3

I refered ur site.
sry, there are many mistakes u have to refer html basics and its classes thoroughly and use css reset to finish it quick and correct.
anyway use:
col-1 {
float: left
}
col-2 {
float: left
}
and refer clearfix.
use clearfix for the col-1 and col-2 parent with another class [not in content-container].