The above is the first question, second question: and why does the space disappear when display:flex is added to li?
scrim:
https://scrimba.com/scrim/co9bb45bcb4721bc9e7608003
#Why is there some space between the blue and red border for the location pin and menu icon?
pale granite
chrome dove
LOL, I just answered a similar question in another thread, so I'm pasting part of that response here.
The issue you're seeing is a weird default behavior in HTML with <img> (and other inline) elements. By default, the layout engine adds extra space below <img> elements because their display type is inline.
When you add the display: flex; to the parent element, the display property of its child elements changes from inline to block, which makes the extra space disappear.
open prism
Building on that, this is why most CSS reset declarations include
img { display: block }