How to align left lists last child [duplicate]

Have been struggling with this problem too long. I have horizontal menu, code below. I want align last iten of the menu to right. Thats why because it is magnifying class icon for the search.

HTML:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#fag">FAQ</a></li>
        <li><a href="#team">Team</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#haku" class="lastlink"><img class="suurennuslasi" src="img/suurennuslasi.png"></a></li>
    </ul>
</nav>

CSS:

nav { 
    color: white;
    background-color: #312c6e;
    width: 100%;
    overflow: hidden;
    min-height: 60px;
    display: flex;
    flex-direction: row;
}
ul :first-child {
    margin-left: 10px;
}
.suurennuslasi {
    height: 20px;
}
.lastlink {
    align-content: : right;
}