Product Landing Page CSS question

I’m having issue with my header/nav-bar on this project, whenever I make it all of the items are on separate lines. I know that I can switch like everything in the HTML to display:inline, but I was wondering if there is something I’m missing? I feel like rewritting code is unwise since the whole idea of programming is problem solving. I’ve added my HTML below, thank for any help you guys can give me.

  <header id="header">
        <div class="headerLogo">
          <img src="summer.png">
          <h2>Bombtasic Icecream</h2>
        <nav id="nav-bar">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#pricing">Pricing</a></li>

I tried to put everything in a list to see if that would help, it didn’t I think I’m gonna scrap that idea. I’ve Google’d the tag and there wasn’t a whole lot to help me that I could find.

You can use a list in the navbar, you can solve that using flexbox or grid on the list.

I had another issue with the When I click the #submit element, the email is submitted to a static page (use this mock URL: Part my form has the action to go to that static page, when I click the link it send me to the page and for some reason it isn’t registering it on the checker.

<form id="form" action="">
      <input type="email" id="email" placeholder="" required>
      <input type="submit" value="submit" name="submit" id="submit" type="btn">

I don’t know what you mean by “isn’t registering it on the checker”.
It’s easier for people to help you troubleshoot if you provide a link to your pen so your code can be reviewed. A snippet isn’t always helpful.

If you mean a test is failing, you can click on the red button to see which test is failing with a description of what the test is looking for that should help you resolve the issue.