Styling different between desktop and mobile

Please look at www.ckdev.info/centerfour/ on desktop (how the hamburger menu should look) and then on mobile (notice how the padding appears different and it runs off the bottom of the header).

I had exactly the same issue on another site (which I did after starting this one as I liked the clean look) at www.allamericanshutter.com/ . To get that one looking good I needed to increase the size of the "box" to 52 x 52 with 5px padding all round. However, you'll see, on mobile, this one is wrong in layout too. I did add a pretty hefty margin to the bottom of the button to make it not run off the header, but, of course, that screws with layout on desktop where it's towards the top rather than centered vertically.

On both, I did make the hamburger 2.4em BOLD which may or may not be at least part of this issue. I'm just surprised it changes so much in layout between desktop and phone.

The other issue is, try what I might, I cannot get the menu button to center in the block. See it's right justified. FYI, I have the menu assigned to a regular module block in Template Creator. Assigning it to a horizontal menu block causes it to be displayed inside the TC hamburger menu.

Hi
I don't really understand.I see the same hamburger button in both desktop/mobile
the difference is the position. Is that what you mean ?
this is because on mobile your modules are stacked (in the template), on desktop they are aligned
to align the icon, you can add this css code
CEd

Apologies - I thought I'd described the situation properly. Here's a couple of screenshots. As you can see in the mobile version, it won't center in the screen and overlaps the header (the bottom of the header area is the horizontal line), and also the 3 lines are off center within the borders.

OK I see
1/ the mobile menu is not designed to be centered at any time. I have give you the code to align the button if you want
2/ the button is positioned in absolute, this means that it does not manage the height of the bar, they are 2 different things
you have
line-height: 43px for the bar
height 48px for the button
then you got 5px of the button that are out of the bar, do you see ?
you can simply set the line-height at 48px, same height as the button. Or set the button height on 100%

Hope it helps
CEd

Still struggling with this. It's better, but not correct.

By assigning various random colors to parts of the menu, I figured out what is controlling what. I set the height of the button at 100% as you suggested, but still I have the hamburger lines looking fine on desktop, but not centered vertically within the button on a phone. There isn't anywhere else to alter how it displays on a phone. If I add 5px of padding at the top of the button, the desktop is wrong but the phone looks (more or less) correct.

Do I require separate menus to be set up for desktop and phone? I just ended up removing the borders as I'd already spent at least 2 hours fiddling to try and make it work.

sorry, I misunderstood the problem of the alignment in the mobile view. I see now that you are talking about the 3 lines of the hamburger ...
It seems that you have now replaced with another menu on your website ?