Why is my hr element before my div?

Why is my hr element before my div even tho I put it after. Same thing happens if I give my nav div a border bottom style. the bottom border will be at the top.

https://replit.com/@AleksisLeinats1/Spend-Your-Money

<body>
  <div class="nav">
    <div class="nav1">
      <h2 class="bold">SPEND YOUR MONEY</h2>
    </div>
    <div class="nav2">
      <h2 class="bold">MONEY</h2><h2 class="bold"> $$$</h2>
    </div>
  </div>
  <hr>
.nav {
  clear: none;
}
hr {
  clear: none;
}
.nav1 {
  display: inline-flex;
  float: left;
}
.nav2 {
  display: inline-flex;
  float: right;
}

I just changed the .nav1 and .nav2 to this and it seems to work

.nav1 {
  display: inline-flex;
  justify-content: left;
}
.nav2 {
  display: inline-flex;
  float: right;
}

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.