Beaver Theme Child index.php with Numeric Pagination using the_posts_pagination

index.php

<?php get_header(); ?>

<div class="fl-archive container">
	<div class="row">

		<?php FLTheme::sidebar('left'); ?>

		<div class="fl-content <?php FLTheme::content_class(); ?>" itemscope="itemscope" itemtype="http://schema.org/Blog">

			<?php FLTheme::archive_page_header(); ?>

			<?php if(have_posts()) : ?>

				<?php while(have_posts()) : the_post(); ?>
					<?php get_template_part('content', get_post_format()); ?>
				<?php endwhile; ?>

				<?php	
				the_posts_pagination( array(

					'prev_text'          => '&laquo; Previous' . '<span class="screen-reader-text">' . __( 'Previous page', 'themename' ) . '</span>',
					'next_text'          => '<span class="screen-reader-text">' . __( 'Next page', 'themename' ) . '</span>' . 'Next &raquo;',
					'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'themename' ) . ' </span>',

				) ); ?>

			<?php else : ?>

				<?php get_template_part('content', 'no-results'); ?>

			<?php endif; ?>

		</div>

		<?php FLTheme::sidebar('right'); ?>

	</div>
</div>

<?php get_footer(); ?>

pagination.css

/* Pagination
--------------------------------------------- */

.pagination {
    	display: block;
	clear: both;
    	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	margin: 40px 0 0 20px;
	text-transform: uppercase;
	text-align: center;
}

.pagination a {
	color: #fff;
}

.pagination li {
	display: inline;
}

.pagination  a {
	background-color: #fff;
	border-radius: 3px;
	color: #333;
	cursor: pointer;
	display: inline-block;
	margin-bottom: 4px;
	padding: 8px 12px;
}

.pagination span.current {
	padding: 12px;
	border: 1px solid #f5f5f5;
	border-radius: 3px;
}


.pagination a:hover,
.pagination a.active  {
	background-color: #9EC7D7;
	color: #fff;
}