Adding padding / margin to website with a vertical navigation side bar?

Site URL: https://www.roseysbeauty.co.uk/

Hi there! 

I've added a vertical navigation to a site for a client in 7.1 (which works well - code below via ghost plugins) , but the side nav means that all the content is pushed towards the left side. I have added a site wide margin of 5vw in the spacing options and the following code in the custom css: 

 // Vertical Navigation //
@media screen and (min-width: 640px) {
.header-nav-list {
  width: 135vh !important;
  padding: 15px;
  background:hsl(6, 64%, 33%) ;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 999;
}
}

I have tried using the following code to add the padding to the left size, but it is not looking right and each time I make the screen smaller on the laptop or via a tablet view it starts to get closer to the left side again. (I've added some pictures to explain this more clearly) :

@media screen and (min-width: 901px){
  #collection-5f8759667f0f4c44ec700440 {
   margin-left: 0px !important;
   margin-right: 0px !important;
   padding-left: 5vh !important;
   padding-right: 0px !important;
}
}

Would be extremely grateful if any one could suggest how I could fix this so that both sides are equal at all times!! The vertical nav bar is only for desktop and tablet / ipad view. 

The website is www.roseysbeauty.co.uk and password is roseysbeauty1 🥰

Many many thanks, 

Mehak

On 11/24/2020 at 4:36 PM, Mehak said:

I have added a site wide margin of 5vw in the spacing options

I'm thinking that part of your issue could be the use of the 5vw. The vw unit is not a fixed unit in that each 1vw changes width based on the width of the viewport.

If you go to px or other fixed unit the issue may get better.

@creedon Thanks so much just tried this and it seems to work! Does this also work with responsive font sizes as I make the screen smaller the font gets bigger rather than smaller. Is there any custom code you would know to change this?

14 hours ago, Mehak said:

Does this also work with responsive font sizes as I make the screen smaller the font gets bigger rather than smaller.

I don't have an answer off the top of my head for this issue.

Perhaps someone else may.