I appreciate the community's assistance, although I don't think the answers provided here will significantly impact computer science understanding in the 21st century.
My challenge lies in centering an image within a bootstrap framework. The image is placed inside a .container-fluid, a .row, and a .col-xs-6 with .offset-xs-3. The <img...> itself is styled with .img-responsive. You can view the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.
Despite my efforts, I am unable to successfully center the image. I aim to have a scalable image that adjusts with the viewport width like SVG, positioned at the center of the page. Unfortunately, I haven't been able to achieve this as expected.
I suspect the issue could be related to using a "raw" image from Dropbox as my src, or because the image format is .jpg, or perhaps a combination of factors. Due to my limited experience in this area, it's possible that there might be a simple typo that I'm overlooking. I've reviewed the Bootstrap documentation and various Stack Overflow questions without finding a solution. One workaround involves removing the <img...> element from the container and row, then applying ... class="centered-block" .... However, I believe there should be a more straightforward approach, and I'm eager to understand and correct any conceptual errors for personal growth.
On a side note, I have also observed that my <a ...></a> tags do not appear to be clickable. Any insights on this matter would be greatly appreciated as well.
After some investigation, I discovered that CodePen operates on Bootstrap 4, contrary to my initial assumption of Bootstrap 3.