Adjust Menu items and social links in desktop burger menu without affecting the mobile burger menu items and social links.

I've added a hamburger menu to my desktop view and customised some bits, but the problem I'm having is trying to adjust the padding and placement of the menu items and social links on the burger desktop menu without it also changing the padding and placement of the menu items and social links on the mobile menu too. I've tried to look for some custom css to see if this is possible but haven't managed to find anything. Is this something that can be done? 

I've attached screenshots so you can get a clearer idea of what I'm trying to achieve. I want the menu items to be aligned to the right and to align with the "x" and social links at the bottom so it all looks neat and cohesive but I can't do this without affecting the alignment of both the desktop and mobile view at the same time. I can get the menu items in the mobile view in the correct place but then it pushes the menu items on the desktop view way out. 

This is the code I currently have for my menu's. Thank you in advance.

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
    padding-left: 100 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
  
 /*makes mobile menu NOT full screen*/
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 255; 
margin-left: 0vw;
box-shadow: 12.5px 5px 15px #000}
  
  /* Moves cart to left and keeps space away from burger*/
.header-actions--right .header-actions-action {
    margin: 0 0 0 -5.799999999999997vw;
}}
/*targets menu text items*/
.header-menu-nav-item a {
    font-size: 24px;
      line-height: 1.2;
      margin: 1.5vh 5vw;
      font-family: standerd
}

@media screen and (min-width:768px) {
  .header-menu {
        left:unset;
        width: 25%
    }
} 

/*targets menu text font*/
.header-menu-nav-item a {
    font-size: 24px;
      font-family: standerd
}
/*targets menu containters*/
.header-menu-nav-item a {
    position: relative;
      bottom: 0vh;
    display: block;
    margin: 1.4vw vw;
    transition: opacity 250ms cubic-bezier(.4,0,.4,1);
}

Hi,

What is site url? We can check easier