Image floating out of section


i started my first project today, created the first paragraph and image.
when i change the size of the screen image is floating out of the section (grey area).

how can i make it stick inside? this is a link to my pen:

thank you

In Bootstrap 4 images are made responsive with .img-fluid, not .img-responsive. Read the documentation here to more info about it. Another thing, you should put your styles on the CSS not in the HTML, it make your code more easy to read. Last tip, you can accomplish a better result to sticky your nav menu on the top using only CSS instead of using JS to add and remove classes. Here you can learn more about.
Hope this help you.

In css setting of codepen, change from bootstrap 4 to 3. Then in JS add jquery then jquery ui.

Thank you!
i will try this