Please help me fix my CSS

1

https://codepen.io/luthfaan/pen/oNjdyNJ

I don’t know why my email form is not showing up after adding CSS. Also, my ‘.logo’ class is not working it seems. Please help me fix this!

2

Your navbar is hiding the form. I would move the page wrapper down to everything below the header and position it lower in the page so that it is not hidden by the navbar. I recommend trying to figure out the fix I proposed on your own but here’s my code.

Also, you forgot to put your form into the container and one of your other sections is using the container as an id instead of a class.

HTML

<header id="header">
  <div id="logo">
    <img id="header-img" src="https://i.postimg.cc/jdrzhMkp/rsz-193750000-small275201533426.jpg" alt="a glass bottle" />
  </div>

  <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>
</header>

<div id="page-wrapper">
  <div class="container">
    <section id="form-section">
      <h2>Do Subscribe</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Enter your Email" required />
        <input id="submit" type="submit" name="submit" value="Get Started" class="btn">
      </form>
    </section>
  </div>

CSS

#page-wrapper {
  position: relative;
  top: 100px;
}
1 Like
3

@CaraLagumen Thank you very much! Fixed it.

1 Like
4

Happy to help! Have fun coding! :grin:

1 Like