New Template Not Working

Hey There,
I am currently trying to create a new template for the homepage on this site: https://www.cartertilman.com/theshow/. However, when I create one for it and apply to the page in the admin menu it still sticks with the original template.

Here is the default template:

<?php get_header() ?>
<div id="content">
<?php
$pages = get_pages('sort_order=asc&sort_column=menu_order');
foreach ($pages as $pagg) { setup_postdata($pagg);
?>
<div class="content_block">
<a id="<?php echo($pagg->post_name)?>" name="<?php echo($pagg->post_name)?>"></a><br /><br />
<div class="head_col"><h1 class="replace"><span><?php echo($pagg->post_name)?></span></h1></div>
<div class="content_body">
<?php the_content(); ?>
</div>
</div>
<?php } ?>
</div>
<?php get_footer() ?>

Here is the homepage template that I created based on the above template:

<?php
/*
 * Template Name: HomePage
*/
get_header() ?>
<div id="home_content">
<?php
$pages = get_pages('sort_order=asc&sort_column=menu_order');
foreach ($pages as $pagg) { setup_postdata($pagg);
?>
<div class="home_content_block">
<div class="home_content_body">
<?php the_content(); ?>
</div>
</div>
<?php } ?>
</div>
<?php get_footer() ?>

The div classes are being called in a file titled grid.css, here is the one for the original template:

#content {
background: transparent;
margin-left:24.479166%;  /* 235/960 */
width:77.083333%; /* 740/960 */
display:block;
top: 0;
}
.content_body {
	padding: 8.593750% /* 55/640 */ 55px;
	width:78.666666%;  /* 640/960 */
	margin-top: -26px;
	}
.content_block {
	background:url('https://www.cartertilman.com/theshow/wp-content/uploads/2013/01/brillant.png');
	margin-bottom: 900px;
	clear: both;
	top:0;
	margin-left:5.25%;
	width:86%;
}

Here are the updated classes for the in the grid.css for the homepage template:

#home_content {
background: transparent;
margin-left:80%;  /* 235/960 */
width:77.083333%; /* 740/960 */
display:block;
top: 0;
}
.home_content_body {
	padding: 8.593750% /* 55/640 */ 55px;
	width:78.666666%;  /* 640/960 */
	margin-top: -26px;
	}
.home_content_block {
	background:#000 !important;
	margin-bottom: 900px;
	clear: both;
	top:0;
	margin-left:5.25%;
	width:86%;
}

The theme I am currently using for this is “ShapeShifter.” Ultimately I want to be able to uniquely style a page, and I thought making a unique template for the page would be the best way. I am not sure why the default template seems to be overriding the homepage template, and any insight would be great.
Thanks,
Carter