Mobile Logo Not Respecting Flex Box Alignment

[sam-comstock (Sam)]

I’m having trouble getting my navigation to display correctly on mobile devices. The display looks fine in the Webflow emulator as well as Safari and Chrome (see image below) but when I pull it up on an actual device I get the second result.

Intended Result

Actual Result

My mobile specific logo is being pushed over to the center rather than aligning left like it should be. I’ve got flexbox spacing content on all views to where the logo should be aligned directly against the left side of it’s container. I’m guessing I’m missing something with flexbox and display:none since I’m hiding the desktop logo but can’t figure out why the logo is getting pushed to the center rather than aligning right.

Appreciate any help.

---

Here is my site Read-Only: Webflow - Samcom Design

[sam-comstock (Sam)]

After playing around with the svg wrapper and adjusting the max width of the wrapper I was able to get it to align left in the navigation bar and respect the flex box alignment but I’m still not totally sure why this was only showing on a mobile and why changing the width would change how the svg is aligned.