Custom made buttons are overlapping on phones

Hello there,

Hope you're having a good day.

I'm having trouble making the buttons I custom made using CSS look acceptable on phones. As seen from the attached screenshots, there's a few problems:

1) The pagination buttons overlap like seen in the first screenshot
2) The confirm and cancel buttons are way too close together (even on computers) and I don't like it, How would I change that? See the second screenshot. And, the confirm button goes off the screen.
3) Because the confirm button goes of the screen, there's a white blank at the side of the screen. I was wondering how I could change that! Please see the third screenshot.

Clearly, I have various css coding on here. Some of which include:

@media only screen and (max-device-width: 410px) {
.appointments-pagination div.next a, .appointments-pagination div.previous a {
  font-size: 14px;
}
}

.appointments-list table th {
    padding: 0 !important;
    font-size: 16px !important;
}
.appointments-list table td {
    padding: 0 !important;
}

Not sure if this makes a difference or not (I'm not a code expert at all)