I want to align the "Login" item to the right.
I am pretty new to HTML and CSS. I don't even know if this is the right approach to creating a horizontal menu bar.
Something like this: [How I want it to be](https://i.stack.imgur.com/G1oO8.jpg)

Here is my code:

HTML:

```css
@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
```

```html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a class="loginnav" href="#login">Login</a>
</div>

</body>
</html>
```

What do I need to change?
Thank you very much!