我无法将导航栏向右对齐

<style>
    .navbar {
        float: right;
    }
    .navbar li {
        float: left;
        margin-left: 10px;
    }
</style>

<ul class="navbar">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

<style>
    .navbar {
        display: flex;
        justify-content: flex-end;
    }
    .navbar li {
        margin-left: 10px;
    }
</style>

<ul class="navbar">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
</ul>