html – dealt with navbar code isn’t terrific as well as it’s triggering troubles with the web links damaging as well as I do not understand why

I’m not fairly certain exactly how to describe the trouble, however basically, my dealt with navbar either does not scroll, however the links function, or the navbar scrolls however the links do not function. This cycle maintains occurring while I attempt to repair it in html as well as css. I would truly value some aid on this.

Below is the html for the navbar:

 << body>>.
<< nav course=" navbar navbar-expand-lg fixed-top navbarScroll">>.
<< div course=" container">
<>  insertgenericnamehere<-->>.
<< switch course=" navbar-toggler" kind=" switch" data-bs-toggle=" collapse" data-bs-target=" #navbarSupportedContent" aria-controls=" navbarSupportedContent" aria-expanded=" incorrect" aria-label=" Toggle navigating">>.
<< period course=" navbar-toggler-icon"><>  .
<< div course=" collapse navbar-collapse" id=" navbarSupportedContent">
<> < ul course=" navbar-nav ms-auto">>.
<< li course=" nav-item energetic">>.
<< a course=" nav-link" href=" #home">> House<  .
<< li course=" nav-item">
<> < a course=" nav-link" href=" #About">> Regarding<  .
<< li course=" nav-item">
<> < a course=" nav-link" href=" #services">> UX/UI<  .
<< li course=" nav-item">
<> < a course=" nav-link" href=" #Portfolio">> Profile<  .
<< li course=" nav-item">
<> < a course=" nav-link" href=" #contact">> Get in touch with<  .
<.

<.
<.
<.

It does not look that untidy in atom, I promise

Below is the css for the navbar:

I understand I have a lot of "list-style-type", I require to get rid of the extra still.

 ul {
list-style-type: none;
}

{
placement: dealt with;
}

. navbar {
placement: dealt with;
top: 0;
size: 100%;
list-style-type: none;
}

. navbar {
list-style-type: none;
margin: 0;
cushioning: 0;
overflow: concealed;
boundary: 1px strong #e 7e7e7;
background-color: #f 3f3f3;
}

li {
float: left;
}

li {a screen: block;
shade: # 666;
text-align: facility;
cushioning: 14px 16px;
text-decoration: none;
list-style-type: none;
}

li a: float: not(. energetic) {
background-color: #ddd;
}

li a.active {
shade: white;.
background-color: # 04AA6D;.
}

I'm still truly brand-new to html&& css so do not hesitate to pity me for dumb things, however I'm truthfully stymied.