Need logo on the left and links on the right-CodePudding

Currently I'm making navbar for my website, but have this issue: I need logo to be on the left and links on the right. I tried to find some solutions for this, but didn't find any. I'm using nav element and float didn't worked.

Here is my code:

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    justify-content: right;
    background: aqua;
}

nav a {
    color: #344E41;
    text-decoration: none;
    margin: 0px 20px;
    transition: 0.5s;
}

nav a:hover {
    opacity: 75%;
}

<nav>
  <img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
  <a id="nav_a" href="#link1">link1</a>
  <a id="nav_a" href="#link2">link2</a>
</nav>

CodePudding user response：

You can simply add margin-right: auto to the img, and it would do the job, like so:

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    background: aqua;
    gap:20px;
}

nav a {
    color: #344E41;
    text-decoration: none;
    transition: 0.5s;
}
nav img{
 margin-right:auto;
}
nav a:hover {
    opacity: 75%;
}

<nav>
  <img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
  <a id="nav_a" href="#link1">link1</a>
  <a id="nav_a" href="#link2">link2</a>
</nav>

CodePudding user response：

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    justify-content: right;
    background: aqua;
}

nav a {
    color: #344E41;
    text-decoration: none;
    margin: 0px 20px;
    transition: 0.5s;
}

nav a:hover {
    opacity: 75%;
}

#img {
    text-align: left;
    width: 1300px;
}
.img {
    text-align: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <nav>
    <div id="img">
    <img  src="https://i.stack.imgur.com/oqbjv.png" height="50px">
    </div>
    <div>
      <a id="nav_a" href="#link1">link1</a>
    <a id="nav_a" href="#link2">link2</a>
    </div>
    
</nav>

</body>
</html>

CodePudding user response：

Since you are using flexbox, you can set the direction of the elements. Adding to your nav CSS the property:

flex-direction: row;

This should display the elements horizontally to the right.