it's my first post here and while I have been learning a lot from w3schools in the past (compliments!!), I am just about to familiarize myself with w3.css.
For a start, I choose the architects template as basis for a project portfolio as joiner and just started to replace pictures etc. from the original template with my own stuff.
However, I would like to use the HTML5 semantic layout (header, footer, aside...) as much as possible and the w3css tutorial also states that it's possible because the w3-* classes can be applied to whichever HTML element.
So I tried to rewrite the images with top-left captions in the project section of the template into <figure> + <figcaption> elements, as semantically this is exactly what happens on the page. However doing so, the figure-element has much bigger margins/paddings as before, thus breatking the multicolumn-layout - please see https://portfolio.sven-goettner.de - the 4 pics with green background are created using my new semantic markup, while the 4 pics below with the red background are the original <div>-only code from the template. The difference is obvious...
I tried various combinations of which original <div>-tag to change into the respective semantic counterparts, but none was able to produce the original looks.
Could you please redirect me to a resource where I can learn how to fix this or tell me straight away what I am doing wrong?
Thank you very much for your support!