Hello, Marculjonis. Here are a few things I did in your code pen that worked for me. Please try them and if they don’t work on your end let me know and I will try my best to help troubleshoot:
First, go into settings on the top right-hand corner, between fork and change view. Select ‘CSS’, and then under the Quick-Add option select ‘Bootstrap 4’. Save + close, return to your pen, and make the following changes/additions:
You can remove the body tag from the HTML side as it won’t be necessary for this particular page, at least from what I can see and from what my own tribute page has shown to be true up until now. If someone who is much more educated on this is able to correct me, I would appreciate it, but for now, I would suggest just taking it out. The edits you have made on the CSS side will still affect your page. Here is what I put at the top of the code (although remove the spaces between the < and > on both ends):
< div class='container '>
< div class=‘jumbotron text-center’ >
I have also made the following change to your < img > : < img class=“image-responsive center-block img-thumbnail” src=“https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg” >
img-responsive makes the image responsive, as the name implies, img-thumbnail will add a little border around your image and give it a nice standout look which I think is what you were kind of asking for, and center-block is used to center an image. Essentially, center-block = text-center, except one is for text and one is for images.
Now, I have commented out ALL of your CSS, so really the only change from my page to yours is purely on the HTML side. That doesn’t mean remove your CSS, I just did that to make it easier for me to troubleshoot.
I am by no means an expert, and barely would say I’m even at a novice level as of yet, but honestly most of this was found by repeatedly trying, looking at other people’s tribute pages and seeing what their code did and attempting to reverse-engineer it, and when all else failed, Google became a best friend. Here’s a great website https://getbootstrap.com/ And if it becomes confusing to go to that site and find what you want, or you need more, just try this: Go to google and break down the problem. For example, try googling ‘How do I make white border around image and set everything silver?’ Now, we can help you with that because we can see the example, but Google can’t. So the best way to search for that is something more like this: ‘border around image css’ ‘border around image html’ ‘border around image bootstrap’ etc. You could even find help with ‘image border bootstrap’.
I know that’s a lot to read, but I really wanted to do my best to help and not just spit out a quick answer that wouldn’t actually be of any use. If you have more questions about what I put, feel free to ask.