Table overflowing outside the boundaries

I am working on this page of my website and the table content is overflowing on the right side. The only way I can get the content to stay on the page is if I add a spacer block to the right side, but then there is still a bar on the right side. Not sure how to resolve that. There doesn't look to be any formatting in the HTML for the table that would be causing this.

Any help is appreciated!

This is my CSS for the table and I have it setup to horizontally scroll/be responsive:

/* Points page table formatting */
.responsive-table {
  overflow-x: auto;
}

table.points {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table.points td, table.points th {
  padding: 7px 7px;
}
table.points tr:nth-child(even) {
  background: #D6D6D6;
}
table.points thead {
  background: #AC112A;
  border-bottom: 1px solid #AC112A;
}
table.points thead th {
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: 2px solid #AC112A;
}

table.results thead th:first-child {
  border-left: none;
}

table.points td:nth-child(5) {
    border-right: 2px solid #AC112A;
  }

You should consider reducing text size by adding this to Design > Custom CSS

body {
    overflow-x: hidden;
}
.responsive-table th {
    font-size: 12px;
}