Navigation menu in reverse and not aligned with logo - html

Question

I am trying to create a horizontal navigation menu in my vue3 application. I have 2 problems.
My menu is reversed and not in the correct order. 2) My menu does not align with the logo. Below is an image of what it looks like
<template>
<header>
<nav class="navbar">
<img src="src\assets\logo.svg" height="50px" width="50px" />
<ul>
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact us</li>
</ul>
</nav>
<style scoped>
.navbar {
background-color: white;
border-radius: 30px;
}
.navbar li {
float: right;
list-style: none;
margin: 13px 20px;
font-size: 24px;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: black;
}
</style>

Answer 1

You could use flexbox model instead of float like this:
.navbar {
background-color: white;
border-radius: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar li {
list-style: none;
margin: 13px 20px;
font-size: 24px;
}
.navbar ul {
display: flex;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: black;
}
<nav class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/512px-Vue.js_Logo_2.svg.png" height="50px" width="50px" />
<ul>
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact us</li>
</ul>
</nav>