Product Landing Page - nav-bar link dont go horizontally

Tell us what’s happening:

I cant arrange the nav-bar links horizontally. Please help! :pray:

Your code so far

MY HTML CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Original Trumbones</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>

<!--  ==============HEADER============== --> 
    <header id="header">
        <div class="logo">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trumbones-logo"></div>

        <div class="nav-links">
        <ul>
          <li><a id="nav-link1" class="nav-link" href="#Features">Features</a></li>
        
        <li><a id="nav-link2" class="nav-link" href="#How-it-works">How it works</a></li>
        <li><a id="nav-link3" class="nav-link" href="#Pricing">Pricing</a></li></ul>
        
        </div>
    </header>
</br></br>

<!--  ==============MAIN============== --> 
    <main>
      <div class="flexcont">
       
      <section id="Features"></section>
      <h1 class="feature-h1">Handcrafted, home-made masterpieces</h1>
      <section class="email-submit">
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Give us your email"> </input>
        <input id="submit" type="submit" value="   GET STARTED"> </input>
      </form>
      </section>

      </br></br></br>

      <section id="features-2">
        <div class="feactures-icon">
          <div>ICON 1</div>
          <div>ICON 1</div>
          <div>ICON 1</div>          
        </div>
        <div class="features-text">
        <ul>
          <li>
          <div>Premium Materials</div><div>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</div>
          </li>
          <li>
          <div>Fast Shipping</div><div>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</div>
          </li>
          <li>
          <div>Quality Assurance</div><div>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</div>
          </li>
        </ul>
        </div>
      </section>



      <section id="How-it-works"></section>
      <h1>HOWITWORKS</h1>
      
     

     


       <video id="video" width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          
          </video>

           <section id="Pricing">
             <ul>
               <li>
                 <div>TENOR TROMBONE</div>
                 <p><span>$600</span>
                 Lorem ipsum.
                  Lorem ipsum.
                Lorem ipsum dolor.
            Lorem ipsum.
                 </p>
                 <button>SELECT</button>
                 </li>

                 <li>
                 <div>BASS TROMBONE</div>
                 <p><span>$900</span>
                 Lorem ipsum.
                  Lorem ipsum.
                Lorem ipsum dolor.
            Lorem ipsum.
                 </p>
                 <button>SELECT</button>
                 </li>

                 <li>
                 <div>TENOR TROMBONE</div>
                 <p><span>$600</span>
                 Lorem ipsum.
                  Lorem ipsum.
                Lorem ipsum dolor.
            Lorem ipsum.
                 </p>
                 <button>SELECT</button>
                 </li>
             </ul>
           </section>
      </div>
    </main>



<!--  ==============FOOTER============== -->    
    <footer>
      <div class="footer-links">
      <a href='https://freecodecamp.org'> Privacy</a>
      
        <a href='https://freecodecamp.org'> Terms</a>
      
        <a href='https://freecodecamp.org'> Contact</a>
      </div>
      <p>Copyright 2016, Original Trombones</p>
    </footer>
  </body>
</html>

MY CSS CODE:

*{
  background-color:ebecf0;
}

header{
  position: fixed;
  top: 0;
  width:100%;
  height:10%;
  border: solid black 1px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  z-index:999;
}

.nav-links {
  margin-right:15px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;

}

#header-img{
  width:50%;
}


.flexcont{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  margin:5% 0;
}

div{
  border: solid black 1px;
}

.email-submit input{
  display:block;
}

#submit{
  margin:0 25px;
}

ul{
  list-style:none;
}

#features-2{
  display:flex;
}

footer{
  margin-top:auto;
  width:100%;
  height:10%;
  border: solid black 1px;
  z-index:999;
}

.footer-links{
  background-color:red;
  display:flex;
  justify-content:flex-end;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Play around with this code:

header{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  border: solid black 1px;
  background-color:white;
  z-index:999;
 }

.nav-links {
  width: 100%;
}
.nav-links ul {
  margin-right:15px;
  display:flex;
  justify-content: space-evenly;
}

.nav-links ul a {
  text-decoration: none;
  color: gray; 
}

.nav-links ul a:hover {
  color: red;
}

#header-img{
  width:50%;
  padding-top: 10px;
}

Btw, the ‘input’ element is self-closing. You don’t need the closing </input> tag.

Hey thanks, that worked.

but can you tell me why my version did work??

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