Weirdness with page templates – Not displaying page content

I installed a theme to basically jump start my development of this website because it needs to be done QUICK and I figured i could use a jumping off point.

So I have this template which only has the default page, links, and archives. I wanted to create a new page template so I basically downloaded the single page file, changed the name, reuploaded and then was just going to play with the HTML a little. (stuff I have done before)

So i downloaded page.php and reuploaded it with a different name and added the page template tag to the top to call it HOME PAGE

I then went to the about page and chose my new HOME PAGE page template in the drop down.

The assumed outcome would be no difference because I did not change anything yet, it would display the same as it was before because it is essentially the same file with just a different name

BUT the outcome I got was instead a list of POSTS on this page (not the page content that I typed into the “edit page” form.

You can see here:
https://bscwebinar.com/about/ that there is the Hello World BLOG POST, but when I go to the page’s edit field there is the about page text.

HOWEVER, if you go here https://bscwebinar.com/test/ you see the page title and page content.

The “about” page has the copied page.php with the HOME PAGE template name applied to it and the SERVICES page has the default page template attached.

WHY IS THIS HAPPENING? Shouldn’t they be the same?

Here is the code for my new template:

<?php
/*
Template Name: Home Page
*/
?>

<?php get_header(); ?>

	<div id="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

and here is the single page template called page.php

<?php get_header(); ?>

	<div id="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

any help is greatly appreciated.. as this is making a whole lot of NO SENSE to me.