Help Me! Basic Bootstrap Question

Okay, so I’ve been playing and staring at this code for over an hour trying to get it to work and my brain now wants to turn to mush. Can someone please look this code over and explain to me why my image is refusing to be responsive. It just sits there, none changing.

Spongebob demostrating imagination

Oh I forgot to add the link, silly me, here it is: https://codepen.io/Spy10/pen/wqJBYm/?editors=1100

Well, I’ve been working with HTML and CSS on and off for a year now and I just started using the bootstrap framework. According to the website I’m learning from, the .img-responsive class is supposed to make the image as wide as your browser. The css code should look someone like width:100% height:auto overflow:hidden but whenever I add it to my img class, the image won’t change. I’m thinking I’m probably doing something wrong or have overlooked something.

This works, thanks. It would seem I still have much to learn. I don’t think my brain is wired for front end web development but even back end developers need to be familiar with the front end side so I hear. And yea, I sometimes get my divs confused but I will hopefully get used to it. Thanks, again.