How to reduce size of next and previous blog post titles on mobile

My website (www.realchineseacademy.co.uk) has a blog page and I've noticed that on mobile the next and previous blog titles overlap like in this screenshot:

How can I change the size of the text for this specifically? Or is there a way to make the two titles not overlap?

Thanks!

@Sophie16 Here's CSS that I've used (delete the purple lines) with sample values. You may have to add !important after a value below. 

@media screen and (max-width: 767px) {
.item-pagination--prev-next h2{
  font-size: 1.1em;  Make the font size smaller
  line-height: 1.25 em; Adjust the space between lines
  font-weight: 500; You can make the text bold, if desired
  margin-left: -15px; You can create more of a buffer on both sides
  margin-right: -15px;
}}

It looks like your website may also be scrolling from left to right, which it shouldn't do. I'd recommend adding this line of CSS:

html, body {
    overflow-x: hidden;}

@WCS This has worked, thank you!

Another issue I noticed is that the blog post titles are stopping halfway across the main blog page for both desktop and mobile versions. Is there a way to change this so it goes across the whole page?

This has worked, thanks Cass! 🙂