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: https://github.com/sandeyshc/ACME-frontend

Website link: https://6127a673da25ff00079834e6–pedantic-goldberg-0f0184.netlify.app/

App.js

  return(
<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>
  <div className="hellosm">
  <img src={logoss}/>
  </div>
</div>
  );

App.css

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

  }
}

Answer

use webkit-scrollbar

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

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