The outline isn’t showing on the first <a> tag because <a> tags are inline by default, meaning they only take up as much space as their content. When you put a larger block element, like a <div>, inside an inline <a>, the outline doesn’t wrap around it correctly. Setting display: flex on the <a> tag fixes this by making it behave like a block element, allowing the outline to cover the entire content.