<div class="col-12 pagin">
                
  <nav class="navigation pagination" >
    
    <div class="nav-links"><ul class="page-numbers">
  <li><span aria-current="page" class="page-numbers current">1</span></li>
  <li><a class="page-numbers" href="http://eurekakids/category/block/page/2/">2</a></li>
  <li><a class="page-numbers" href="http://eurekakids/category/block/page/3/">3</a></li>
  <li><a class="next page-numbers" href="http://eurekakids/category/block/page/2/">Next »</a></li>
</ul>
</div>
  </nav> 
                              
      </div>

.pagin {
    text-align: center;
    margin: 0 auto;
    max-width: 1140px;
    width: 100%;

}

ul.page-numbers {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    justify-content: center !important;
}

ul.page-numbers li:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

ul.page-numbers li:not(:disabled):not(.disabled) {
    cursor: pointer;
}

a.page-numbers,
span.current {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #000;
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
}

span.current {
    color: #fff;
    background-color: #FEC812;
    border-color: #FEC812;
    cursor: default;
}

span.dots {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #000;
    background-color: #fff;
    border: 1px solid #dee2e6;
    cursor: default;
}

nav.navigation {
    width: 100%;
}