You should shrink the width of your web browser when viewing your project, so you can see how it will display on smaller screens. You will be surprised how it looks.
View from Ipad
View from Iphone 7
Part of your pages display problems are that you are attempting to use Bootstrap 3 class syntax for various elements (i.e. img-responsive for img tags), but your Codepen CSS does not have Bootstrap 3 loaded. To add Bootstrap 3 library, you need to click on the gear button of the CSS moduule and then select Bootstrap 3 using the Quick-add dropdown in the bottom right-hand corner of the Pen Settings dialog box. It will then show the link as https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
Once you add this, the photo will be responsive and shrink as neccessary.
The next problem you have, is the white container with the photo in it is shifted to the right because you added the following to the style attribute of your image.
This will not solve all of your issues, but it is a start. In general, your html syntax is very inconsistent. You sometimes are using Bootstrap classes, at other times you are using style="", and at other times, you are using deprecated attributes such as
<font size="4">. You should really get in the habit of controlling all of the styling within your CSS module section either where Bootstrap does not have a class that performs the same task or where you want to tweak a Bootstrap class just for your project.