everyone! I hope you are all fine.
Background
I'm a beginner in web development and I'm studying pure HTML, CSS and JS for front-end. In parallel, I've been studying Git to version my study/case study projects. I decided to create a README for my GitHub profile, because I saw some really cool customizations and I'm wanting to give "my personality" to my profile, in order to create contact and network with people from web development and data analysis (two areas I've been studying). Also, I saw a good opportunity to practice HTML incorporated into Markdown.
I made almost the entire file using the "details" and "summary" tags so that the person reading it can open and close each section of information. Since one of the sectors talks about my "passions" and one of them is reading, I thought it would be interesting (and more "human") to add what I am reading at the moment. So, I added a section to put the two books I'm reading/studying at the moment. The idea was to put an image of each book (so two images) and a caption below each image with the chapter that is currently being read (so two subtitles). I did some research on the use of the "img" tag and the best practices for inserting images in Markdown and HTML files and came to the conclusion that it would be better to add the images with HTML tags. To do this I used the "figure", "img" and "figcaption" tags.
What I wrote
<details>
<summary><strong>What am I reading now?</strong></summary>
<div style="display: flex; justify-content:space-between;">
<figure style="text-align:center; flex:1;">
<img src="src/book1.png" alt= "Summit Lake - Charles Donlea" width="200px"/>
<figcaption styles="text-align: center;">Chapter 26</figcaption>
</figure>
<figure style="text-align:center; flex:1;">
<img src="src/book2.png" alt= "Confident Data Skills - Kirill Eremenko" alt="Confident Data Skills" width="200px"/>
<figcaption styles="text-align: center;">Chapter 2</figcaption>
</figure>
</div>
</details>
Explaining what I done
As you can notice, I added a "div" because I concluded it would be better for stylizing the content on the screen. I set each image to have a width of 200 pixels and made use of flexbox to try to settle the images on the screen (even though I used "block" and "inline-block" before the "flex").
Problem Statement
I had a little trouble getting the images side by side and the captions below them, but in the end I understood what I was doing wrong. I am using VsCode as an editor and installed the "Markdown Preview Enhanced" plugin. And this is where the bizarre thing comes from: opening the preview in VsCode, the images are perfectly aligned and the captions are properly centered just below each image. However, when I upload it to GitHub, the images sit side by side, but the caption is on the right side of each image.
What I tried
I played with the spacing and display in the style. Initially I had written a "style" tag to be able to make the file more organized, but I found out that GitHub breaks this tag in the README for security reasons. So I passed the "style" tag as an argument to the proper tags (as you can see in the attachment above). I opened my browser's developer tool (I'm using the most current version of Chromium) and tried to understand and solve the problem. I could see that an "a" tag was added right after the "div" tag, and this is not in my original script. I concluded that a link was automatically added for when anyone clicks on the image, send them to the "src" folder that I created to store the images. This leads me to believe that it maybe captions have been "pushed" to the right side of the images because of that. I tried to highlight the "boxes" to see if I understood what was going on, and when I highlighted them it looked like 4 boxes (one for each image and one for each caption) were created side by side (which fried my head, honestly).
So I want to know if this is a bug in GitHub (since in the Preview in VsCode it looks normal) or if there is something wrong with what I did. Below, I attach the screenshots of the Preview and what appears in the README inside GitHub:
Finalizing
Anyway, I apologize if the text was too long. As I like to know the context of things when someone asks me something, I also like to give a context so that people can understand the problem. Thank you for any help I can get. o/
If anyone wants to see the problem, you can open my GitHub profile page here.
PS: I'm not a native. So if I wrote something wrong or if there are any problems with my grammar, please correct me and let me know what I'm doing wrong. ^^