Mobile nav menu cut off

Site URL: https://turkey-chiton-rmpc.squarespace.com

Hi! I added a custom code to my navigation menu to fit all my menu items into 1 line. However, now my mobile menu icon is a bit cut off  (see photo attached). Could anyone please advise on how I can move the icon more to the left so that it's not cut off? 

• https://turkey-chiton-rmpc.squarespace.com
• password: chivers

Here's the code I have so far:

}
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
line-height: 2.5 !important;
margin-left: 12px !important;
  font-family: Raleway;
  font-size: 13px !important;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.header-nav-folder-content {
background: #fffff !important;
}
@media screen and (max-width: 767px) {
.header-menu-nav-item a {
font-size: 30px;
font-weight: 300;
}
}
.user-items-list-item-container .list-item-content__title {
  font-family: Raleway;
  font-size: 32px !important;
  letter-spacing: .1em;
  line-height: 1.2em;
  text-transform: uppercase;
}
// Header Nav Width Adjustment
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 2 0 100%;}

Thank you in advance!

If you're trying to just adjust the desktop site, place all of the CSS within a media query:

@media only screen and (min-width:1024px) {

  //CSS GOES HERE

}