How can I position two elements close to each other in a flexbox navigation bar-CodePudding

So I have a simple flexbox navigation bar with three elements.

A logo
a list of items and
a div with two buttons.

What I would like is for the div with two buttons to be on the right side of my navbar and the logo and list elements to be on left side. I would prefer if possible not to use margins or position property.

The problem I am having is that I cant seem to get the logo and list items on the left corner of my navbar. I tried to use justify-content: space-between but it only evenly spaces the elements. (as it should) so that I now have my logo on the left, my list in the middle and the div of buttons on the right. Instead of div of buttons on the right and the other two on the left.

So I'm not sure what would be the best way forward. Help much appreciated.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
}

.body-container {
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-flex li {
  margin-right: ;
  display: inline-block;
}

.navabar {
  list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="style.css" rel="stylesheet" type="text/css">

  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>

<body>

  <div >
    <nav >
      <img src="images/logo.svg" alt="company logo">
      <ul >
        <li><a href="#">Features</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">About</a></li>
      </ul>

      <div >
        <button >Login</button>
        <button >Register</button>
      </div>
    </nav>

  </div>
</body>

</html>

CodePudding user response：

Just wrap img and ul tags in a div and add display flex to it. Hope this help you solve your problem.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Epilogue', sans-serif;
}

.body-container {
    background-color: hsl(0, 0%, 98%);
    height: 100vh;
    width: 100vw;
    max-width: 100%;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .left-element {
display : flex;
}

.navbar-flex  li {
    margin-right: ;
    display: inline-block;
}

.navabar {
    list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href = "style.css" rel = "stylesheet" type = "text/css">
  
  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>
<body>

<div class = "body-container">
  <nav class = "navbar">
  <div class = 'left-element'>
    <img src = "images/logo.svg" alt = "company logo">
    <ul class = "navbar-flex">
      <li><a href = "#">Features</a></li>
      <li><a href = "#">Company</a></li>
      <li><a href = "#">Careers</a></li>
      <li><a href = "#">About</a></li>
    </ul>
    </div>
    
    <div class = "navbar-btn">
    <button class = "btn btn-primary">Login</button>
    <button class = "btn btn-primary">Register</button>
    </div>
  </nav>
  
</div>
</body>
</html>

CodePudding user response：

You can wrap left side elements in a parent div then give flexbox property also for this div

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
}

.body-container {
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-flex li {
  margin-right: ;
  display: inline-block;
  margin-left: 20px;
}

.navabar {
  list-style-type: none;
}

.leftDiv {
  display: flex;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="style.css" rel="stylesheet" type="text/css">

  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  <style>

  </style>
</head>

<body>

  <div >
    <nav >
    <div class='leftDiv'>
      <img src="images/logo.svg" alt="company logo">
      <ul >
        <li><a href="#">Features</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>

      <div >
        <button >Login</button>
        <button >Register</button>
      </div>
    </nav>

  </div>
</body>

</html>