Serious need for help Product landing page

Tell us what’s happening:

I am getting stuck on what I feel is the simplest freaking step. I can not for the life of me get my image and nav bar on the same line. I have searched high and low, compared (even copied) the code from the original code pen and it still won’t work. What am I possibly doing wrong?

Your code so far

<script src=""></script>
<div id="page-wrapper">
  <div id="header-div">
<header id="header">
  <div class="logo">
    <img id="header-img" src="" alt="original trombones logo">

  <nav id="nav-bar">
      <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>



li {
  float: right;
  margin-right: auto;
  margin-left: auto;
  width: 60%;
   list-style: none;
  display: flex;
  width: 10vw;

Your browser information:

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

Link to the challenge:

it is easier to help if you provide a link to your codepen…

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


You were using 3 single quotes on the same line instead of 3 backticks on the same line, which is why your code was not formatting correctly.

The nav and div elements have a default value of block for their display properties. What that means, is they will each be contained on a separate line. If you change their display property to inline-block, then they will be on the same line.

Try changing your logo class to the following:

/*   width: 10vw; */
  display: inline-block;

and your nav-bar id selector to:

#nav-bar {
  display: inline-block;

Now, they will be on the same line. I had to comment out the width: 10vw of your logo class, because it was interfering with displaying the div and nav elements side by side.

1 Like

Sorry, I thought I included it.