need to remove a scroll on mobile view : mobile view of website allows me to scroll to the right when it shouldnt allow it to happen.

    @media screen and (max-width:768px){
        body{
            overflow-x: hidden;
            width: 100%;
    
        }
    
       
      
      .nav-links{
          position: absolute;
          right:0px;
          height: 92vh;
          top: 8vh;
          background-color: 	#4A4F52; 
          display: flex;
          flex-direction: column;
          align-items: center;
          transform: translateX(100%);
          transition: transform 0.5s ease-in;
        z-index: -1;
    
      }
    
      .nav-links li{
          opacity: 0;
      }
    
      .burger{
          display: block;
          cursor: pointer;
      }
    }
    
    .nav-active{
        transform: translateX(0%);
        z-index: 1;
        width: 100%;
        height: 100%;
        
    }

Hi all, 

I am building a website and i have a new bar thats working greating in terms of sliding across from the right hand side, shoing the menus etc. however when on mobile i can scroll my screen across and see part of the back ground for the nav bar. I have tried the "overfloe-x:hidden" approach on the body and html elementsand that hasn't worked. i have tried various solutions mentioned in old posts on stackoverflow. is there anything any could suggest ? 

If anything else is needed just let me know and i can post it.