In my Wordpress template, clicking on the blog post <a> takes me to a 'criteria not found' page instead of the post.

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

<?php get_header()   ?>

    <link rel="stylesheet" href="<?php bloginfo('template_directory');?>/CSS/blog.css">

<!--------------- Blog Entries -------------------->        
            <div id="blogWrapper" class="col-xs-12">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <article class="m-b-2 p-y-2 col-md-4" id="blogEntry" <?php post_class('post'); ?>>
                    <div id="blogPostPic" class="img-fluid m-b-2"><?php the_post_thumbnail('large');?></div>
                       <h4 class="text-xs-center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                        <h6><?php the_date(); ?></h6>
                        <a><p><?php the_excerpt(); ?></p></a>
                        <div id="socialIcons">
                            <button id="blogPostButton" type="button" class="btn btn-warning col-xs-4">Read More</button>
                            <div id="iconsBlock" class="col-xs-8">
                                <i style="color:deepskyblue" class="fa fa-twitter fa-2x" aria-hidden="true"></i>
                                <i style="color:navy" class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
                                <i style="color:red" class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i>
                            </div>
                        </div>
                </article>

                <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
                <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
            <?php endwhile; else : ?>
            </div>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
            <?php endif; ?>

        <?php get_footer() ?>

        <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap --> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
        <script src="<?php bloginfo('template_directory');?>/JS/main.js"></script>

<?php get_header();?>

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/CSS/universal.css" media="screen" />

<!--Start Blog Post-->
<?php if (have_posts()) while (have_posts()) : the_post(); ?>
    <div class="m-b-2 p-y-2 col-md-4" id="blogEntry">    
        <img src="img/network.jpg" class="img-fluid">
        <h4 class="text-xs-center"><?php the_title(); ?></h4>
        <h6><?php the_time('F j, Y'); ?></h6>
          <p><?php the_content(); ?></p>
        <div id="socialIcons">
            <button type="button" class="btn btn-warning col-xs-4">Read More</button>
            <div id="iconsBlock" class="col-xs-8">
                <i style="color:deepskyblue" class="fa fa-twitter fa-2x" aria-hidden="true"></i>
                <i style="color:navy" class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
                <i style="color:red" class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i>
            </div>
        </div>
    </div>
<?php endwhile; else : ?>

              <p><?php _e( 'Sorry, no posts found.', 'treehouse-portfolio' ); ?></p>

            <?php endif; ?>


<?php get_footer(); ?>