Serious need for help Product landing page

HTML-CSS
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:

2

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

5

Sorry, I thought I included it.