I want to align my UI element to the right only with CSS.

here is my CSS code.

nav {
    display: flex;
    padding: 20px;
    font-family: Arial;
    background-color: #4E00A7;
    text-align: right;
    
}

nav li {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: inline-block;

}
 nav li a {
    color: white;
    float: right;
    margin-left: auto;
    text-decoration: none; 
    padding-left: 10px;
    padding-right: 10px;
}


.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.pull-right {
    float: right;
}

and a screenshot of my current HTML doc
Html Document renderd

I’ve tried floating it to the right, text aligning it, hoping it would go left.