How to remove the scrollbar from my website ? Work arounds didn’t work

I am using react framework for designing a website. The website is well designed and complete . Now I see that my website is scrolling through y axis . I have seen work around like overflow:hidden but the screen design will be impacted because it has margin on top and bottom. Can anyone look into it and tell me answer?

GitHub link:

Website link: https://6127a673da25ff00079834e6–


<div className="grid grid-flow-col grid-rows-1 grid-cols-2 gap-0 helloss col-span-2" style={{backgroundColor:'black',padding:'4% 8%', resize:"contain"}}>
  <div className={sizes} style={{backgroundColor:'#fff'}}>
  <Login />
  {/* style={{resizeMode: 'contain'}} */}
  <div className="hellosm">
  <img src={logoss}/>


  height: 100%;
@media only screen and (max-width: 768px) {
    display: none !important;
    visibility: hidden !important;



use webkit-scrollbar

html::-webkit-scrollbar {
    display: none;

/* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */