How do I limit the clickable area in my webpage.

[mrchow19910319]

I have created a webpage that has 4 images in it. Each image has a link , the link will direct the user to other website. (In this case it is my own work a.k.a other website/little project I did).

The one thing that bothers me was the clickable area. The clickable area is too big. I want to lock in the clickable area into those 4 images only. As I explained it in the pic I posted below. 

Here is the codepen link. Other people have suggested that I should make the paddings of the images 0, I did. It did not work. 

 

 

[mrchow19910319]

I know how to do it already......  >.<

 

By removing the class

img-responsive

 and adding 

text-center

into the class of 4 images, the invisible clickable area disappeared.  I don't know why... Some people from other forum told me this fix. And it worked.