Since the position of the header is "fixed", it stays in front of the main content as per the screenshot. preventing one from clicking on the character's profile in order change it for another one.
This bug only occurs in Firefox(89.0.2).(tested on both chrome and edge)
Since fixed elements don't interfere in the document's flow(https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme), this behavior can be corrected by either setting the header's position to sticky( .header{ position:sticky; top:0; } ) or setting a margin for the main content.
Since the position of the header is "fixed", it stays in front of the main content as per the screenshot. preventing one from clicking on the character's profile in order change it for another one.
This bug only occurs in Firefox(89.0.2).(tested on both chrome and edge)
Since fixed elements don't interfere in the document's flow(https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme), this behavior can be corrected by either setting the header's position to sticky( .header{ position:sticky; top:0; } ) or setting a margin for the main content.