ページネーションの数字のリンクが他のページに飛んでしまう

以下のコードを使用しページネーションを実装しているのですが１ページ目のあるボタンを押すと他の他のページに飛んでしまい困っています

function.php

function
1  global $wp_query;
2  $bignum = 999999999;
3  if ( $wp_query->max_num_pages <= 1 )
4    return;
5  echo '<nav class="pagination">';
6  echo paginate_links( array(
7    'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
8    'format'       => '',
9    'current'      => max(1, get_query_var('paged') ),
10    'total'        => $wp_query->max_num_pages,
11    'prev_text'    => '前へ',
12    'next_text'    => '次へ',
13    'type'         => 'list',
14    'end_size'     => 3,
15    'mid_size'     => 3
16  ) );
17  echo '</nav>';
18}
19

１ページ目に表示されるコード

<nav class="pagination">
  <ul class="page-numbers">
    <li><a
        href="http://mutou3.local/news/%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%81%8c%e5%85%a5%e3%82%8a%e3%81%be%e3%81%99%e3%80%82%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%81%8c%e5%85%a5%e3%82%8a%e3%81%be%e3%81%99%e3%80%82%e3%82%bf%e3%82%a4/"><span
          aria-current="page" class="page-numbers current">1</span></a></li>
    <li><a class="page-numbers" href="http://mutou3.local/news/page/2/">2</a></li>
    <li><a class="page-numbers" href="http://mutou3.local/news/page/3/">3</a></li>
    <li><a class="next page-numbers" href="http://mutou3.local/news/page/2/">次へ</a></li>
  </ul>
</nav>

２ページ目に表示されるコード

<nav class="pagination">
  <ul class="page-numbers">
    <li><a class="prev page-numbers" href="http://mutou3.local/news/page/1/">前へ</a></li>
    <li><a class="page-numbers" href="http://mutou3.local/news/page/1/">1</a></li>
    <li><span aria-current="page" class="page-numbers current">2</span></li>
    <li><a class="page-numbers" href="http://mutou3.local/news/page/3/">3</a></li>
    <li><a class="next page-numbers" href="http://mutou3.local/news/page/3/">次へ</a></li>
  </ul>
</nav>

３ページ目に表示されるコード

<nav class="pagination">
  <ul class="page-numbers">
    <li><a class="prev page-numbers" href="http://mutou3.local/news/page/2/">前へ</a></li>
    <li><a class="page-numbers" href="http://mutou3.local/news/page/1/">1</a></li>
    <li><a class="page-numbers" href="http://mutou3.local/news/page/2/">2</a></li>
    <li><span aria-current="page" class="page-numbers current">3</span></li>
  </ul>
</nav>

SCSS

.page-numbers {
  text-align: center;
  margin-top:7.2rem;

  >li {
    margin: 0 2px;
    padding: 0;
    display: inline-block;

    >.page-numbers {
      width: 50px;
      height: 50px;
      display: table-cell;
      vertical-align: middle;
      color: #fff;
      background: $lightblue3;
      border-radius: 10px;
      text-decoration: none;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      &:hover,
      &:active {
        color: #000;
        background: #ccf;
        border-color: #00f;
      }
      &.current {
        color: #fff;
        background: $blue;
      }
    }

    >.prev,
    >.next {
      width: 80px;
    }
  }
}

全３ページなのですが１ページ目の最初のliタグのaタグにhrefが入ってしまい崩れてしまいます
なのでそれ以外は特に問題ないです
ちなみにそのリンクを踏むと１１個ある記事のうち７個目の記事に飛びます
なぜそうなるのか分からず困っています
長くなりましたがよろしくおねがいします