Why won't my nav lis display horizontally with floats?

Question

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.

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*/
}

<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

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

Answer 1

You can use flexbox to arrange them either column or row. Declaring display: flex; should apply what you're trying to do. See the snippet below:

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*/
}

#SideBar{
  display: flex;
  gap: 5px;
}

<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>

More on flexbox here.

Answer 2

Use this on css.....

#SideBar{
display: flex;
}

Answer 3

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;
}

<header>
<nav>

<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>

The problem

• is you have used width: 7%; to header nav>*

Weird one

• its weird that you have used display: block; along with display: inline;

Solution

• I have commented the The problem and Weird one,run the snippet it should work