Alignment of pagination buttons after editing

Hi guys,

Ive added this snippet from another post from Tom:

add_filter( 'generate_next_link_text', function() {
    return 'Older Posts';
} );

add_filter( 'generate_previous_link_text', function() {
    return 'Newer Posts';
} );

Then I added this CSS from I believe David from another post:

/* Center Navigation */
#nav-below {
    text-align: center;
}

/* Page Number styling */
#nav-below .page-numbers:not(.dots) {
    background-color: #fff; 
    color: #000;
    border: 1px solid #000;
    padding: 5px 15px;
    box-sizing: border-box;
    line-height: 30px;
}

/* Change current and hover colors */
#nav-below .page-numbers:not(.dots):hover,
#nav-below .page-numbers.current {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
}

Then I added this CSS to remove the dots:

.page-numbers:not(.next):not(.prev) {
    display: none;
}

I however cannot figure out why the alignment when in mobile is over to the right and not centered

Any help would be great