linking blog post titles that appear on front page

Hello, and thank you for taking the time to read this. I have a problem I’ve worked on most of the morning and can’t find a resolution for. On the the front page of our site (https://www.nanolumens.com) we have a LATEST post section. The title isn’t linked back to the original post and we really want it to be. Here’s the code:

<!-- LATEST NEWS START
	============================================= -->
	<?php
		$blog_block_title		= get_field('blog_block_title');
		$blog_item_number		= get_field('blog_item_number');
		$blog_block_background	= get_field('blog_block_background');
	?>

	<?php if( $blog_item_number != NULL ) { ?>
	<div class="latest-post wrapper bg-color" <?php if(!empty( $blog_block_background )) { ?>style="background-color: <?php echo esc_html( $blog_block_background 

); ?>;"<?php } ?>>
		<div class="container">
			<div class="row">

				<?php if(!empty($blog_block_title)) { ?>
				<div class="section-title text-center wow fadeIn">
					<h2><?php echo sanitize_text_field( $blog_block_title ); ?></h2>
				</div>
				<?php } ?>

				<div class="post-wrap wow fadeIn" data-wow-delay="0.5s">

				<?php $order1 = array(

					'posts_per_page' => $blog_item_number,
					'ignore_sticky_posts' => true,
					'orderby' => 'date',
					'order' => 'desc'
					);

					$sec_hook = new WP_Query( $order1 );
					if ($sec_hook->have_posts()) : while($sec_hook->have_posts()) : $sec_hook->the_post(); ?>

					<?php $archive_month = get_the_time('m'); ?>

					<div class="post-item">
						<?php if ( has_post_thumbnail()) { ?>
						<a href="<?php echo esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) ); ?>">
							<div class="post-thumb">
								<?php the_post_thumbnail(); ?>
								<div class="overlay"></div>
							</div>
						</a>
						<?php } 

						else {
							echo '<a href="'. esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) ).'">';
							echo '<div class="post-thumb">'; ?>
							<img src="<?php echo get_template_directory_uri(); ?>/img/placeholder-latestnews.jpg" alt="<?php esc_html_e( 

'latest-news-place', 'logitrans' ); ?>">
							<?php echo '<div class="overlay"></div></div></a>';
						} ?>

						<div class="post-content">
							<div class="date">
								<span><?php echo get_the_date('d'); ?></span>
								<span><?php echo get_the_date('M'); ?></span>
							</div>

							<div class="content-wrap">
								<h4><?php the_title(); ?></h4>

								<div class="excerpt"><?php echo logitrans_excerpt(20); ?></div>
								<a href="<?php the_permalink(); ?>" class="button-normal with-icon">
									<?php esc_html_e( 'Read More', 'logitrans' ); ?>
									<i class="icon icon-arrow-right"></i>
								</a>
							</div>
						</div>
					</div>

				<?php endwhile; wp_reset_postdata(); endif;  ?>

				</div>
			</div>
		</div>
	</div>
	<?php } ?>
	<!-- LATEST NEWS END -->

I’ve attempted a simple solution on the title like this:

<h4><a href="<?php the_title(); ?>"></a></h4>

What results is a link that isn’t formed correctly – like this: site.com/the name of the post (as opposed to the proper format site.com/the-name-of-the post)

Any assistance would be greatly appreciated. Thank you.