Navigation bar HTML & CSS

Question

I'm working on a navigation bar and it currently looks like this:

Now I want that the text floats to the right. So that the red space is on the left-side. But if try "float: right", it looks like this:

The red background disappeared. I used a extra div (columnsection) but in the best case scenario I want to get rid of it. I hope someone could help me.

* {
  padding: 0px;
  margin: 0px;
}

#navbar {
  margin: auto;
  width: 100%;
  max-width: 1200px;
  background-color: red;
  color: white;
}

#navbar ul li {
  display: inline-block;
  background-color: blue;
  margin: 0px;
}

#navbar ul {
  float: right;
}

<div id="navbar">
  <div id="columnsection">
    <ul>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
    </ul>
  </div>

Answer 1

Instead of float:right use text-align:right

* {
  padding: 0px;
  margin: 0px;
}

#navbar {
  margin: auto;
  width: 100%;
  max-width: 1200px;
  background-color: red;
  color: white;
}

#navbar ul li {
  display: inline-block;
  background-color: blue;
  margin: 0px;
}

#navbar ul {
  text-align: right;
}

<div id="navbar">
  <div id="columnsection">
    <ul>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
    </ul>
  </div>
</div>