How to align this nav menu to right?

Hi, I’m new to HTML/CSS. To make it better, I start trying to code a random website as my new hobby.

This is my first time creating. I’m using 2 flexboxes. Anyone know why I can’t move the nav menu start with VPN to right? I’ve attached my coding below.


  <div class="logo"><img src="images/logo.svg" alt="" /></div>
      <li><a href="">VPN</a></li>
      <li><a href="">Reviews</a></li>
      <li><a href="">Tools & Research</a></li>
      <li><a href="">Guides</a></li>
      <li><a href="">About Us</a></li>


@import url(“;400;600&display=swap”);
body {
font-family: “Open Sans”, sans-serif;
font-weight: 400;
.header {
background-color: rgba(182, 182, 182, 0.555);
display: flex;
align-items: center;
flex-direction: row;
height: 10vh;
.logo {
width: 260px;
margin-left: 40px;
nav ul {
display: flex;
flex-direction: row;
nav ul li {
list-style: none;
nav ul li a {
font-size: 1.2rem;
text-decoration: none;
color: black;
display: block;
padding: 15px 10px;

In a flex box with two items you can align one to the left and the other to the right of you set justify-content: space-between on the flex box.


Set justify-content: flex-end for nav ul