Page scrolling even when there's no content - html

Question

My web page is scrolling to the right even though there's no content there and there's just empty white space there. The content isn't over 100vw and if I reduce it, then it doesn't fill the page.
Perhaps some of the CSS I've written has caused this? What do I need to change/add to my code to fix this? Thanks.
Home.css
#wrapper {padding: 0; margin: 0; box-sizing: border-box;}
.section
{
padding: 0 20px 20px 20px;
width: 100vw;
display: flex;
flex-direction: column;
text-align: justify;
top: -110px;
left: -230px;
height: 100vh;
justify-content: center;
align-items: center;
position: relative;
background-image: url(../images/background.jpg);
background-position: center;
background-size: cover;
}
h1 {
color: white;
font-size: 70px;
margin-top: 40px;
z-index: 1;
position: relative;
}
.section:after {
content: '';
width: 100%;
height: 100%;
left: 0;
position: absolute;
background: rgba(214, 87, 214, 0.03);
}
.name {
font-family: 'Amatic SC', cursive;
font-size: 62px;
margin-top: 90px;
animation-name: slideInLeft;
animation-duration: 4s;
animation-timing-function: ease-in;
}
#keyframes slideInLeft {
0% {margin-left: -1600px;}
100% {margin-left: 0px;}
}
.role {
animation-name: slideInRight;
animation-duration: 4s;
animation-timing-function: ease-in;
}
#keyframes slideInRight {
0% {margin-right: -1600px;}
100% {margin-right: 0px;}
}
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background: rgb(155, 12, 48) ;
background: radial-gradient(circle, rgb(155, 12, 48) 0%, rgb(63, 2, 87) 100%);
border-radius: 0.6em;
height: 22px;
}
.name {
color: rgb(231, 139, 139);
}
App.css
:root {
--off-white: #fafafa;
}
.nav {
background-color: var(--off-white);
position: sticky;
top: 0px;
width: 100%;
height: 80px;
z-index: 1000;
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
}
.nav-btn {
height: 60px;
width: 60px;
}
.nav .nav-content {
max-width: 900px;
padding: 0rem 3rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.nav-item {
display: inline;
top: 40px;
margin-left: 2rem;
color: white;
font-size: 18px;
z-index: 1;
position: relative;
}
.nav-item:hover {
color: black;
cursor: pointer;
}
.section-content {
max-width: 800px;
margin: 0 auto;
padding: 40px;
}

Answer 1

Have you tried the overflow property,
{
overflow:hidden
}

Answer 2

it's kinda hard to analyze it without HTML code.
But maybe that line is your problem:
.section
{
..
left: -230px;
..
}