Vertical Header CSS Issue - Gray Boxes

Site URL: https://www.sophienauwrites.com/

Hey all, 

I'm trying to change my heading to vertical and used this code from Rebecca Grace Designs:

@media only screen and (min-width:991px) {   
  .page-section:first-of-type {     
    padding-top:0px !important;   
  }   
  .page-section {     
    margin-right: 100px;   
  }   
  #header {     
    width: 100px;     
    position: fixed;     
    height: 100vh;     
    z-index: 99999 !important;     
    display: table;     
    writing-mode: vertical-rl;    
    text-orientation: mixed;     
  }   
  .header .header-announcement-bar-wrapper {     
    padding: 10px 30px 10px 10px;   
  }   
  .header-inner{    
    height: 100vh;     
    display: table-cell;     
    vertical-align: middle;   
  } 
}

.header-nav-item {
 margin-bottom: 5px;
}

For the most part it works (I had to tweak the margins a bit), but I'm left with a gray box on the right and bottom side of my site. I'm pretty sure it's coming from the code. Any thoughts on how to fix this? 

(On another note, I don't love that there is a little line hovering over what page you're on in the navigation, so if anyone knows how to get rid of that as well I'd appreciate it, but less of a priority). 

Thank you!

Have you tried contacting Rebecca through her Private Facebook Group?