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>

Possible duplicate of [Why doesn't the height of a container element increase if it contains floated elements?](http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el) — chazsolo, Mar 07 '17 at 14:54

score 2 · Accepted Answer · answered Mar 07 '17 at 14:54

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>

Navigation bar HTML & CSS

1 Answers1