Hovering title inside a row

I have a question about something I have build for my website.

Above is a gif of me highlighting titles on my web landing page. As you can see, the line extends further than the text. I think I have an idea about why it is doing this, because I have a row which is equally spaced into three parts. I have tried altering the code and I cannot get it to go past the lines, however.

Above is the code I use to display the three columns to divide it up and also equally space and align the text. Is there any possible way which I could prevent the underline feature going further than the text, while maintaining this column structure?