In the following image, I’ve outlined 3 things in red, the first is the the title of a box with the words 'Final Fantasy IV', the second box is 'Sonic Chronicles: The Dark Brotherhood, and the third is the css styling of the title as displayed by Chrome.
My issue is that in the first box, labeled 'Final Fantasy IV', you can see it looks ok, and there’s no overlapping, in the second box however, you can see some font overlapping. What’s some CSS magic I can do to fix this?
Thank you.

CSS Magic:
CSS
positiondocumentation:http://www.w3.org/TR/CSS2/visuren.html#propdef-position