.header-navbar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.header-navbar li{
    display: inline; /*if you use display flex in ul, it wont give spaces between items*/
}

.header-navbar li a{
    /* color: rgb(98, 0, 255); */
    color: #ff00c1;
    text-align: center;
    padding: 14px 16px;
    font-size: 1.65rem;
    text-decoration: none;
}

.header-navbar li a:hover{
    background-color: rgb(98, 0, 255);
    /* background-color: #ff00c1; */
    color: white;
}

a {
    text-decoration: none;
    color: inherit; 
}