Controlling the X icon on mobile CSS

Hi Guys, 

Having some issues with trying to control the X icon on tablet, basically I have used some CSS for mobile and have been able to adjust the position of the X icon so when you click the menu, the X icon appears directly on top, but on tablet, the X appears more to the right and not above the burger nav, YouTube link below to show what I mean: https://youtu.be/gtmZXpkcaAg

I managed to find some code, which does seem to work, but when moving the X icon to the left more, it seems to get cut off, below is the code I've used...

@media screen and (min-width:641px) and (max-width:1350px) {
.Icon--close {
    padding-right: 30px !important;
}
}

Any ideas on this would be great!

Have you solved it yet?