scroll option button doesn't work as expected - html

Question

Could you please check and advise why my scroll button doesn't work as expected?
It's my first project, so I believe there may be some mistakes, but have no idea why my scrolling "crashes".
I was expecting it to be only a pink one and have the smooth scroll option on the whole page, but it breaks into two lines. Unfortunately, I can't post the image, but basically, this "second" line is like the line in the standard browser and behind that line, I have my pink one.
{
font-family: 'Poppings', sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
}
html::-webkit-scrollbar {
width: 0.5rem;
}
html::-webkit-scrollbar-thumb {
background: #d9296f;
}
body {
padding: 0;
margin: 0;
background: #08122f;
overflow-x: hidden;
}
section {
padding: 3rem 9%;
}
.heading{
text-align: center;
margin-bottom: 2rem;
}
.heading span{
color: #d9296f;
font-size: 2rem;
}
.heading h1{
font-size: 4rem;
color: #8f7fa2;
}
.btn {
margin-top: 1rem;
display: inline-block;
padding: 1rem 3rem;
font-size: 1.7rem;
color: #d9296f;
border: 0.2rem solid #d9296f;
border-radius: 5rem;
cursor: pointer;
background: none;
}
.btn:hover {
background: #d9296f;
color: #08122f;
}
/*---header---*/
.header{
position: fixed;
top:0;
left: 0;
right: 0;
z-index: 1100;
background: #08122f;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-boxpack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1.5rem 9%;
box-shadow: 0 1px 6px 0 rgba(193, 193, 212, 0.28);
}
.header .navbar a{
font-size: 2rem;
color: #8f7fa2;
display: inline-block;
margin: 0 1rem;
}
.header .navbar a:hover{
color: #d9296f;
}
.logo{
font-size: 2.5rem;
color: #8f7fa2;
font-weight: bolder;
}
.logo span{
color: #d9296f;
}
#menu-btn{
font-size: 2.5rem;
color:#8f7fa2;
cursor: pointer;
display: none;
}
/*--home---*/
.home{
margin: auto;
margin-top: auto;
width: 80%;
display: -webkit-box;
display: -ms-webkit-box;
display: flex;
min-height: 80vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 5rem;
}
.home .content{
text-align: center;
}
.home .content span{
margin-top: 100px;
font-weight: bolder;
color: transparent;
-webkit-text-stroke: 0.1rem #8f7fa2;
font-size: 4vw;
display: block;
}
.home .content h3{
font-size: 6vw;
color: #8f7fa2;
}
.home .content p{
max-width: 60rem;
margin: 1rem auto;
font-size: 1.4rem;
color: #8f7fa2;
margin-top: 18px;
line-height: 2;
letter-spacing: 1px;
}
/*--about--*/
.about{
display: -webkit-box;
-display: -ms-flexbox;
display: flex;
-webkit-boxalign: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 4rem;
margin-top: 5rem;
}
.about .img-container{
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
width: 50%;
}
.about .img-container img{
border-radius: 1rem;
width: 40%;
}
.about .content{
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
margin-bottom: 10rem;
}
.about .content span{
color: #d9296f;
font-size: 2rem;
}
.about .content h3{
color: #8f7fa2;
font-size: 4rem;
margin-top: .5rem;
}
.about .content p{
padding: 1rem 0;
font-size: 1.4rem;
color: #8f7fa2;
line-height: 2;
}
/*--Services--*/
.services .box-container{
display: -ms-grid;
display: grid;
-ms-grid-column: (minmax(25rem, 1fr)) [auto-fit];
grid-column: (minmax(25rem, 1fr)) [auto-fit];
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
gap: 1.5rem;
}
.services .box-container .box{
background: #08122f;
border-radius: 1rem;
padding: 1rem;
text-align: center;
box-shadow: #8f7fa2;
}
.services .box-container .box:hover{
transform: scale(1.05);
background: #8f7fa2;
}
.services .box-container .box i{
font-size: 4rem;
color: #d9296f;
margin-bottom: 3scrolrem;
}
.services .box-container .box h3{
font-size: 2rem;
color: #d9296f;[enter image description here][1]
}