Streaming live at 10am (PST)

Inconsistent thickness for Menu icon

Hi, Webflow community!

I’ve added 3 lines to set up on the menu icon so that it can be animated. However, it has inconsistent thickness for each line in different screen sizes. They are actually all set up in the same way, with a 0.4em margin on the bottom of each line to space out the lines. Not quite sure why this will change the thickness of the line though.

Would be great if someone can shed some light! Thanks

Link below;
https://preview.webflow.com/preview/the-man-in-the-hat?utm_medium=preview_link&utm_source=designer&utm_content=the-man-in-the-hat&preview=2c2999410e087a100b8570e21e712a5e&pageId=61192950b056a46550d0a657&workflow=preview

Cheers,
Daphne