'Struggling to position logo on left and navigation on right

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>
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions