QR code component solution using CSS Grid and Flexbox

1- Please help. My finished project is not displaying correctly from the github live site url above! At first I forgot to include the image file in my file uploads but later added it in the github. I tried to refresh the page but did not work even though the finished project is now displaying correctly in my laptop after updating the file path in the 'src' attribute in the source code.

2- I am getting the following errors and whenever I try "git add ." in Git Bash. So I couldn't add, commit and push my codes from local machine to git hub. I had to resort to manual method! I have the following file types in my folder: .png, .gitignore, .html, .md and .css

warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it error: unable to write file .git/objects/d1/3464af54e87679bf87e20754a35abe51dc4449: Filename too long error: .gitignore: failed to insert into database error: unable to index file '.gitignore' fatal: adding files failed

Now questions related to the project

1- I find it difficult to control the size of the image in its container using only template-columns and template-rows properties in grid without specifying image size in any unit. Please how best should I do it?

2- Please what is the difference between section, article and aside semantic tags in html?