My href link to other html pages wont work - html

Question

i've made a change to the navigation from scrolling in only one page to linking them to other pages instead. but i cant seem to make the href link work after that. i dont know what could be the problem here
i havent made any changes to the CSS, originally it was meant to be a navigation for one page, but im changing it to navigation to other pages
im pretty sure i need to do something to the css but im not sure what
it is
class="sidebar-navigation hidde-sm hidden-xs">
<div class="logo">
<img src="img/logo.png" alt="logo" style=" margin-top:13px;width:100%;height:100%;">
</div>
<nav>
<ul>
<li>
<a href="index.html">
<span class="rect"></span>
<span class="circle"></span>
Home
</a>
</li>
<li>
<a href="company.html">
<span class="rect"></span>
<span class="circle"></span>
Company
</a>
</li>
.sidebar-navigation nav {
position: relative;
top: 60%;
left: 60%;
-webkit-transform: translateX(-60%) translateY(-60%);
-moz-transform: translateX(-60%) translateY(-60%);
-ms-transform: translateX(-60%) translateY(-60%);
-o-transform: translateX(-60%) translateY(-60%);
transform: translateX(-60%) translateY(-60%);
}
.sidebar-navigation ul {
margin-left: 45px;
list-style: none;
padding: 0;
}
.sidebar-navigation li{
padding: 10px 0;
}
.sidebar-navigation span{
display: inline-block;
position:relative;
}
.sidebar-navigation nav a{
display: inline-block;
color: #fff;
margin-top: 5px;
text-decoration: none!important;
font-size: 15px;
letter-spacing: 0.5px;
text-transform: capitalize;
}
.circle{
margin-right: 5px;
height: 10px;
width: 10px;
left: 0px;
top: -1px;
border-radius: 50%;
background-color: transparent;
border: 2px solid #fff;
transition: all 0.3s;
}
.rect{
height: 1px;
width: 0px;
left: 0;
bottom: 5.5px;
background-color: #fff;
-webkit-transition: -webkit-transform 0.1s, width 0.6s;
-moz-transition: -webkit-transform 0.1s, width 0.6s;
transition: transform 0.1s, width 0.6s;
}