Serious need for help Product landing page

Serious need for help Product landing page
0

#1

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
HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="page-wrapper">
  <div id="header-div">
<header id="header">
  <div class="logo">
    <img id="header-img" src="https://cdn.athlonoutdoors.com/wp-content/forum/uploads/sites/8/2011/09/council-axe.jpg" alt="original trombones logo">
  </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>
  </div>

</header>
</div>

CSS

ul{
 
}
li {
  float: right;
  margin-right: auto;
  margin-left: auto;
  width: 60%;
   list-style: none;
  display: flex;
}
.logo{
  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:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page


#2

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


#3

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.


#4

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:

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


#5

Sorry, I thought I included it.