Mobile responsive design--> Img-responsive not working

Question

I'm new to web development, hope you can help me on below:

I am facing problem with creating an responsive image on mobile.

Here is my link to codepen and the code:

[1] [1]: https://codepen.io/Qiyang/pen/EwEKMz

<div class="container">
  <div class="jumbotron">
<h1 class="text-center"><b>Sir Alex Ferguson</b></h1>
<h2 class="text-center 16px"><font size="5">Manchester United legend</h2>
  <figure>
    <img class="img-responsive" src="https://www.thesun.co.uk/wp-content/uploads/2016/10/nintchdbpict000277927275.jpg?w=960">

As you see, i have added img-responsive class to my image but on my samsung mobile, the image is still stretching out of the screen, causing scrolling.

If i add a max-width:100%;, the image fits better although it still goes off by a little. It may be due to the margin i set, but isn't the img-responsive class supposed to resize the image accordingly to fit?

If the class only resize to the screen and not the jumbrotron, how would you recommend writing the code to fit the jumbotron?

Thanks

Answer 1

As I can see you have use margin-left for img-resposive that is why your image is overflowing.

.img-responsive { margin-left: 0; max-width: 100%;}
figure {text-align: center;}

Change to this and your code will work.