Get data from custom fields..

I am trying to retrieve specific data from the post:

This is my functions.php code

add_action('add_meta_boxes','custom_add_meta_box');

 function custom_add_meta_box(){
 	add_meta_box(
		'home_details',               // ID
		'Add New Home',			      // Title
		'custom_display_meta_box',    // Callback
		'post',                       // Targeted post type
		'normal'                      // Position
		);
 }

 function custom_display_meta_box($post){
	 // Variables
	 $home_price = get_post_meta($post -> ID, 'price', true);
	 $home_sqf = get_post_meta($post -> ID, 'sqf', true);
	 $home_bed = get_post_meta($post -> ID, 'num_bedrooms', true);
	 $home_bath = get_post_meta($post -> ID, 'num_bathrooms', true);
	 $home_description = get_post_meta($post -> ID, 'description', true);
	 $home_address = get_post_meta($post -> ID, 'address', true);

This is my index.php

<?php if(have_posts()):?>
<?php while(have_posts()) : the_post();?>
<div class="row">
    <div class="large-4 columns">
        <div class="panel bodyHeight">
         <?php if(has_post_thumbnail()) : ?>
         <a href="<?php the_permalink();?>"><?php the_post_thumbnail(); ?></a>
         <?php endif;?>
        </div>
     </div>
     <div class="large-8 columns">
        <div class="panel bodyHeight">
        <p>Price: <?php echo the_post($home_price);?></p>
        </div>
     </div>
</div>
<?php endwhile;?>
<?php else: ?>
<div class="row">
    <div class="large-4 columns">
        <div class="panel bodyHeight">
        <h3>No posts were found.</h3>
        </div>
    </div>
</div> <?php endif;?>

</div>

As you can see I am trying to format my page so that I can position every value from the DB in specific location on the page I am trying to start with PRICE as you can see but I am getting blank.

Also pasts that I have created I have categorized them under “for-sale” slug not sure if that makes a difference.

Thanks