Struggling to position logo on left and navigation on right-CodePudding

Very very new to this, and cannot situate the nav bar to the right and in line with the logo on the left inside my header. I have tried float: right; and align-items on the parent container. I keep getting stuck on this when I try to build websites and thought it was time to reach out. Any help would be really appreciated. Cheers.

body {
    background-color: lightgrey; }


header {
    border-bottom: 1px solid black;
    display: flex; }

.container {
    display: flex; 
    background-color: white; }


.container li {
    display: inline-block;
    list-style-type: none;
    color: black;
    padding: 0 20px; }


.company-logo img {
    width: 150px; }


.hero-image {
    height: 500px;
    background-image: url("./images/designbig.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 50px; }

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    color: red;

}

<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>Portfolio</title>
<link rel="stylesheet" href="./styles.css">
</head>

<body>

  <header>
    <div >
      <div >
          <img src="./images/92ad01dfa3f6d8f97a62cfdc21c9c566.jpeg" alt="">
      </div>
      <nav>
        <ul >
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div >
    <div >
      <h1>Hello World</h1>
      <p>This is me</p>
      <button>Hire Me</button>
    </div>
  </div>

  <div >
    <p>Hello, this is some paragraph content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quo quas saepe, dolorem tempora molestiae nostrum dolore neque, vero adipisci sunt id praesentium cumque aspernatur quae nemo? Pariatur, rerum? Perspiciatis.</p>
  </div>

</body>

</html>

CodePudding user response：

You needed to remove display:flex on header and add those lines on .container:

align-items: center;
justify-content: space-between;

Full code:

body {
  background-color: lightgrey;
}
.container {
  display: flex;
  background-color: white;
  align-items: center;
  justify-content: space-between;
}

.container li {
  display: inline-block;
  list-style-type: none;
  color: black;
  padding: 0 20px;
}

.company-logo img {
  display:block;
  width: 150px;
}

.hero-image {
  height: 500px;
  background-image: url("./images/designbig.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  color: red;
}

<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>Portfolio</title>
<link rel="stylesheet" href="./styles.css">
</head>

<body>

  <header>
    <div >
      <div >
        <img src="https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80" alt="">
      </div>
      <nav>
        <ul >
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div >
    <div >
      <h1>Hello World</h1>
      <p>This is me</p>
      <button>Hire Me</button>
    </div>
  </div>

  <div >
    <p>Hello, this is some paragraph content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quo quas saepe, dolorem tempora molestiae nostrum dolore neque, vero adipisci sunt id praesentium cumque aspernatur quae nemo? Pariatur, rerum? Perspiciatis.</p>
  </div>

</body>

</html>