Product Landing Page - Header elements behavior

HTML-CSS
1

Tell us what’s happening:

I’m working on the CSS on this project and can’t figure why my logo and navbar don’t want to be on the same line like in the exemple project. I feel like I tried every display values so help is welcome.

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>trombone landing page</title>
    <link rel="stylesheet" href="./styles.css">
  </head>


  <body>

    <header id="header">
      <nav id="nav-bar">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">  
        <ul>
          <li><a class="nav-link"href="#features">Features</a></li>
          <li><a class="nav-link"href="#videodiv">Trombone creation</a></li>
          <li><a class="nav-link"href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>

    <main>

      <div id="mail">
        <h1>Don't miss our next launch</h1>
        <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">
          <input id="email" type="email" placeholder="Enter your email" required name="email"></input>
          <input id="submit" type="submit" value="Get started"></input>
        </form>
      </div>


      <div id="features">
        <h1>Best shipping prices</h1>
        <p>Ut mollis elementum augue, et tristique elit dignissim at.</p>
        <h1>High quality materials</h1>
        <p>Ut mollis elementum augue, et tristique elit dignissim at.</p>
        <h1>4.5 stars on Trustpilot</h1>
        <p>Ut mollis elementum augue, et tristique elit dignissim at.</p>
      </div>


      <div id="videodiv">
        <iframe id="video"src="https://youtu.be/y8Yv4pnO7qc"frameborder="0"allowfullscreen>
        </iframe>
      </div>


      <div id="pricing"></div>


    </main>
    <footer>
      <nav>
        <ul>
          <li><a href="https://www.lipsum.com/feed/html">Contact</a></li>
          <li><a href="https://www.lipsum.com/feed/html">Cookies</a></li>
          <li><a href="https://www.lipsum.com/feed/html">Contact us</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

/* file: styles.css */
*,*::before,*::after{box-sizing:border-box;}

a{text-decoration:none;
color:black;}

a:hover{color:orange;}

header{position:fixed;
top:0;
height:15vh;
width:100%;
margin:0;
margin-left:-10px;
padding:0;
display:flex;
overflow:hidden;
background-color:#EEEEEE;}

#header-img{height:50%;
width:30%
display:inline-block;}

#nav-bar{height:100%;
width:70%;
display:inline-block;}

#nav-bar li{display:inline;}

main{margin-top:16vh;}



@media screen and (min-width: 5000px){body{background-color:orange;}}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

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