Columns on top of each other instead of side by side

What is wrong with my code? I want there to be 2 columns. the left one should have content for the pages (which is does) the right one should have the Widget Area ONE. However, for some reason the "right" column is under the "left" instead of being side by side. Column sizes are 8 and 4.

They won't stay with the red and blue background...I was just trying to figure it out on my own.

http://4seasonsoutdoorservices.com/redo/

<?php get_header(); ?>


<div class="row" style="background:yellow;">
<div class="col8" style="background:red;">

<div id="post-<?php the_ID(); ?>" <?php post_class('cf'); ?>>

<div class="post-bodycopy cf">
<?php the_content(); ?>
<?php wp_link_pages( array(
'before' => __( '<p class="post-pagination">Pages:', 'montezuma' ),
'after' => '</p>'
) ); ?>
</div>
<?php edit_post_link( __( 'Edit', 'montezuma' ) ); ?>

</div>
</div>

<div class="col4" style="background:blue;">
<?php dynamic_sidebar( 'Widget Area ONE' ); ?>
</div>


<?php get_footer(); ?>