For now, I learn to create a navbar with flex, This is my codepen :

To this :

CodePudding user response：

Try this piece of styling in your ul selector

 li {
            height:100%;
            width:100%;
            // background-color:#000;
            display:flex;
            justify-content:center;
            align-items:center;
            
            
            a {
              text-decoration: none;
              color: $color-0;
            }
    
                          }
          li:hover{
                background-color:$color-8;
            }

Also edit the padding of ul selector to padding: 0 0 0 2rem; so the nav-links get stucked to extreme right as shown in the image