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.

HTML

  <div class="logo"><img src="images/logo.svg" alt="" /></div>
  <nav>
    <ul>
      <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>
    </ul>
  </nav>
</div>

CSS

@import url(“https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;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.

3 Likes

Set justify-content: flex-end for nav ul