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">
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link rel=stylesheet" href="styles.css"/>
 <link rel="stylesheet" href="" crossorigin="anonymous"/>
       <header id="header">
         <img id="header-img" src=""/><h1 id="H1">Pure Websites</h1>
         <nav id="nav-bar">
             <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>
     <section id="About">
       <h2> Who We Are</h2>
 <div id="h3">
 <h3>Now that you know who we are, are you ready to sign up?</h3>
 <form id="form" action="">
   <input id="email" 
 type="email"  name="email" placeholder="Enter your Email Address">
 <input id="submit" type="submit"
     <section id="Options">

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

/* 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 {
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/ 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

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