Header, logo and links

Hi all, I’m trying to finish to product landing page project and will appreciate any help :slight_smile:

I’m trying to create a navigation bar, with a logo located on the left, and links located on the right. I can’t seem to do that and sure miss something here.

attached are my HTML section and CSS sections. again, I’d appreciate any response.

HTML:

<header id="header">
  <div class="header"> 
<img id="header-img" src="https://i.ibb.co/0Gh5bGs/325f93f744414e4b8dada5bdbb6f6eba.png" alt="header logo">
  <nav id="nav-bar">
    <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#how-it-works">How It       Works</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </div>
      </header>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
     <label for="email">Enter your email to find out  more</label>
     <input 
     type="email" 
     id="email"
     name="email" 
     placeholder="Enter your email"
     />
    <input type="submit" id="submit" type="submit" value="submit" class="btn" //>
      </form>
  <div class="container">
    <section id="features">
      <h2>Features</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>
    <div class="container">
    <section id="how-it-works">
      <h2>How it works</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<iframe width="560" height="315" id="video" src="https://www.youtube.com/embed/Uh3oy7cZFDU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
  </div>
      <div class="container">
    <section id="pricing">
      <h2>Pricing</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

CSS:

header {
  display: flex;
  flex-direction: row;
  background-color: black;
  height: 64px;
  width: 100%;
  position: fixed;
  padding: 1em;
 justify-content:space-around;
 align-items:center;
}

#nav-bar {
  display: flex;
  width: 100%;
  float: right;
}

#nav-bar ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  font-size: 18px;
  width: 100%;
  margin: 0;
  padding: 0;
}

you can refer my project

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.