Menu icon on mobile not displaying properly on Upfront theme

I’m editing the Panino theme and I’m confused about responsive because it seems like the changes I’m making in mobile are carried over to the desktop and I thought the whole point was to adjust it for mobile.

I changed the menu, not the menu but the display of the menu, and it changed on both mobile and desktop. I’ve set the menu icon to be placed on the right on mobile view (which is what I see when I’m on the Upfront Editor) but on the frontend the icon is not correctly displayed. On my iPhone, the menu icon is halfway off the screen below the logo on the left, not on the right on the same line.

The menu icon should be placed on the right on mobile and on the same line with the logo, which should be smaller. In fact, it should be almost the same as desktop. Just with the click for menu hidden, which is what I selected and I also changed the icon (it should be a square icon on mobile). It looks right on the editor, but wrong on the frontend on phone (or when resizing the browser on desktop).

Last night it was perfectly spaced, and looked great on my phone. Now it’s all screwed up

and I haven’t even touched it. I edited the main view, and extended the logo, and I think that’s why this is messed up now.