Move elements from right to left, Nav

Question

Gentlemen, great day, great day, Please, I am working on a particular project, and slowly creating the page. I want to put the lis to the right, but with this codígo can not, the documents say that employee, but I have not found the solution. How could you proceed?

This is html and css:

    <nav class="content">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
        </ul>

        </div> 

.content ul {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    
    display: inline-flex;
   
}
content ul li {
    list-style-type: none;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: baseline;
    align-content: flex-end;
    
    margin: 0 1em;
    
}

Answer 1

First, in this class the "." content ul li { should be .content ul li { and still has a div closure in the middle of the code </div>, it seemed unnecessary...

After you are putting container alignment styles that should be in the FATHER in the SON, I don’t know... and you still used styles of align to align on the shaft X, but on the axis X aligns with margin or justify

Well, there’s more than one option to do that alignment, but here’s a suggestion. Everything that was unnecessary in your CSS I left commented

.content ul {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;

  /* display: inline-flex; */
  display: flex;
  justify-content: flex-end;

}

.content ul li {
  list-style-type: none;

  /* flex-direction: row; */
  /* flex-wrap: nowrap; */
  /* justify-content: flex-end; */
  /* align-items: baseline; */
  /* align-content: flex-end; */

  margin: 0 1em;

}

<nav class="content">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>