Struggling to position logo on left and navigation on right

March 3, 2022

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 class="container">
      <div class="company-logo">
          <img src="./images/92ad01dfa3f6d8f97a62cfdc21c9c566.jpeg" alt="">
      </div>
      <nav>
        <ul class="nav-links">
          <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 class="hero-image">
    <div class="hero-text">
      <h1>Hello World</h1>
      <p>This is me</p>
      <button>Hire Me</button>
    </div>
  </div>

  <div class="content">
    <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>

>Solution :

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 class="container">
      <div class="company-logo">
        <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 class="nav-links">
          <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 class="hero-image">
    <div class="hero-text">
      <h1>Hello World</h1>
      <p>This is me</p>
      <button>Hire Me</button>
    </div>
  </div>

  <div class="content">
    <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>