I had a bug-like issue with a div inside an 'a' tag.
<a href=''>
<div>..</div>
</a>
This <a> tag was inside a flex parent.
For some reason, this <a> added a padding to the div (from the right only). Padding wasn't shown in Google Chrome developer tools, but after trying many things, I accidentally tried the autosuggestion display: contents.
This removed that padding.
What does display: contents do?
What does it do to the <a> tag?
display: contentscauses an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.