CIRCLE NAVIGATION BAR BUTTONS

Hello! I was trying to make a circular button in my navigation bar. I don't want all the buttons in the nav bar to be circular, just the one related to language. I've been using the following css code, but I can't manage to place the circle just under my button so the text and the circle get aligned.

Here's the code:

.header-nav-item:nth-child(10) {
    background: #000;
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    margin: 0px;
    position: relative;
    font-size: 10px;
    text-align: center;
    line-height: 1.5;
    font-weight: 700;
}

Here's my web page. Any help with this would be amazing! 

https://hypersphere-puma-c9ga.squarespace.com

password: techdosweb_2024

Thank you very much! It has worked perfectly 

14 hours ago, aquidos said:

Thank you very much! It has worked perfectly 

Thanks for confirmation, I'm always ready for HELP!