Encountering a strange issue that suggests I might be overlooking something simple. Any thoughts on the following:
I have a heading tag styled with a sans-serif font (loaded from Google fonts) and when I apply a background-color, the text does not align to the left of the containing element:
However, if I switch to a serif font, the text aligns as desired, right up against the left side. Toggling the font on/off in the developer tools clearly shows that it's the serifs causing the change:
There are no additional styles applied to the heading tag, except for a font-weight. I've tried resetting margins with no success.
While using a negative margin might temporarily fix the issue, it's not a viable solution for all screen resolutions.