Twentytwelve child theme CSS problems

Okay I have worked in webdesign for a while now but not much with WordPress. I’m currently making some small changes to a friends blog for her, so I have started basic and decided to use a child theme of twenty twelve because I think that should be sufficient enough for what I need.

However I have already run into problems and cannot seem to find a solution. Basically I have created a static home page pointed to a customized version of front-page.php, now called home.php. The problem is with the child CSS because on my customized home page I have some CSS styles that do not seem to be read or called. I have created some new styles and the setup is as follows:

@import url("../twentytwelve/style.css");

#masthead {position: relative;}

#site-navigation {
    position: absolute;
    top: 0; /* or top, if you prefer */
    right: 0;
}

body .site {

margin-top: 0;

}

#gridcontainer{margin: 20px 0; padding-top: 40px; width: 100%; }

#gridcontainer h2 a{color: #77787a; font-size: 9px;}

#gridcontainer .griditemleft{float: left; width: 100px; margin: 0 40px 40px 0;}

#gridcontainer .griditemright{float: left; width: 100px;}

#gridcontainer .postimage{margin: 0 0 10px 0; border: solid 1px;}

And I have the following in home.php:

get_header(); ?>

	<div id="primary" class="site-content">

		<?php the_post_thumbnail();
				echo get_post(get_post_thumbnail_id())->post_excerpt; ?>

			<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up custom query) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=20');

if(have_posts()) :	while(have_posts()) :  the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('homepage-thumb'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('homepage-thumb'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here
endif;
?>

	</div><!-- #primary -->

<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>

The div classes in the php loop are just not working on my home page at all but everywhere else on the site it seems I can change the CSS fine!

Visit http://66.147.244.133/~antiage4/ to see what I mean.

Any help would be really appreciated, THANKS!