Product Landing Page - Build a Product Landing Page

The words in my nav bar (About, Options and Pricing) are squeezed together. I’ve already tried justify-content: space-evenly and space-around, but they will not separate! Am I missing something here? Also my H2 (Who We Are) isn’t showing up.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Website</title>
 <link rel=stylesheet" href="styles.css"/>
 <link rel="stylesheet" href="https://kit.fontawesome.com/691c50d0be.js" crossorigin="anonymous"/>
 </head>
 <body>
   <main>
     <div>
       <header id="header">
         <img id="header-img" src="https://img.icons8.com/emoji/344/dove-emoji.png"/><h1 id="H1">Pure Websites</h1>
         <nav id="nav-bar">
           <ul>
             <li><a class="nav-link" href="#About">About</a></li>
             <li><a class="nav-link" href="#Options">Options</a></li>
             <li><a class="nav-link" href="#Pricing">Pricing</a></li>
             </ul>
             </nav>
       </header>
     </div>
     <div>
     <section id="About">
       <h2> Who We Are</h2>
       <iframe
       id="video"
       src="https://rumble.com/v1k8kz1-marie-julie-jahenny-and-the-prophecies.html"
 allowfullscreen></iframe>
 <div id="h3">
 <h3>Now that you know who we are, are you ready to sign up?</h3>
 <form id="form" action="https://www.freecodecamp.com/email-submit">
   <input id="email" 
 type="email"  name="email" placeholder="Enter your Email Address">
 <input id="submit" type="submit"
 </div>
     </section>
     </div>
     <section id="Options">

     </section>
     <section id="Pricing"></section>
   </main>

 </body>
 </html>
/* file: styles.css */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
#header-img {
 width: 40px;
 height: 40px;

}
header { background-color: rgb(176, 196, 222);
width: 100%;
}
#h1 {
 position: relative;
margin-left: 50px;
margin-top: -30px;
font-family: Raleway, sans-serif;
color: #4169E1;
font-size: 1rem;
}
nav > ul {
 list-style-type: none;
 margin-top: 0;
 padding-top: 15px;
 display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-left: 320px;
}

h2, h3 {
 color: #7B68EE;
 font-size: 20px;
}
#nav-bar, header{
position: fixed;
z-index: 999;
top: 0;
}
@media (max-width: 600px) {
 #header-img {
   margin: auto;

 }
}

#submit {
 display:block;
margin: auto;
}
#video {
 display: flex;
 justify-content: center;
 max-width: 600px;
 width: 80%;
 margin-top: 30px;
 margin-left: 50px;
}
#email {
 margin-left: 160px;
 margin-top: 20px;
}
#h3 {
 margin: 20px;
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

you you are missing a >

they don’t have the space to, you need to give a bigger width to the element in which they are contained

it’s there, behind the navbar. Use padding to move it downward and make it visible

1 Like