I'm new to coding and trying to figure out why my nav li's will not display horizontally? I've tried a few things which I've noted in the code below.

The catch here is, I must use floats instead of flexbox.

```css
header nav>* {
  float: left;
  width: 7%;
  margin: 0 5%;
  padding-bottom: 30px;
  list-style: none;
  text-decoration: none;
}

header nav ul li {
  width: 100px;
  float: right;
  display: block;
  text-decoration: none;
  /*margin-left: 2px;
  display: inline; not working*/
}
```

```html
<header>
  <nav>
    <a href="#">Courses</a>
    <form action="">
      <input type="text" placeholder="Search">
    </form>
    <img class="icon" src="#">
    <h2>Tech Academy</h2>
    <ul id="SideBar">
      <li><a href="#">Donate</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </nav>
</header>
```

I have tried changing the specificity to a class or id and that hasn't fixed anything. I should also note that 'text-decoration' is not working for the li but is working for the a 'courses'? \* border: box-sizing is also at the top of the css sheet.

[This is what it looks like on the browser](https://i.stack.imgur.com/7ScDP.png)

I am very new to coding and this one has had me stumped for hours. T