Text-align doesn't work the same way on two identical div?

Question

I've made a research before posting but I can't find anything to solve the problem.

I'm making a menu on my website, it has a width of 100% and inside the menu, I put 3 differents div.

Managed to make them take 100% of the width

.clear {
  clear: both;
}
.menu {
  position: relative;
  height: 20%;
  text-align: center;
}
.menu:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("images/triangles.svg");
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
}
.menu li {
  float: left;
  list-style: none;
  margin-right: 5%;
}
.left,
.center,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: blue;
}
.left,
.right {
  width: 30%;
}
.left {
  left: 5%;
  margin-right: 5%;
}
.right {
  right: 5%;
}
.center {
  width: 20%;
  left: 40%;
}

<div class="menu">
  <!--START-->
  <div class="left">
    <ul>
      <li><a href="#01">Element 1</a>
      </li>
      <li><a href="#02">Element 2</a>
      </li>
      <li><a href="#03">Element 3</a>
      </li>
    </ul>
  </div>

  <div class="center">
    <h1>Title</h1>
    <h3>Another Title</h3>
  </div>

  <div class="right">
    <ul>
      <li><a href="#04">Element 4</a>
      </li>
      <li><a href="#05">Element 5</a>
      </li>
      <li><a href="#06">Element 6</a>
      </li>
    </ul>
  </div>

  <div class="clear"></div>
</div>
<!--END-->

My menu has an svg background but I don't think it's causing my issue. The problem is that inside .left and .right, the text-align doesn't works, but it does for the .center div. At the beginning my three div was in float left but as I tought it was the problem, I tried positionning is with absolute positions, but style not working.

I apply a background color to visualise the width of my div and the text is not center at all, obviously a "text-align: right" doesn't work too and I don't understand because .center and .left/.right are basically the same, I can't figure out what's the difference between .center and the other div.

What's wrong in my code?

Answer 1

Because of the following styles

.menu li{float: left; list-style: none; margin-right: 5%;}

There is no space within which for you to see text-align have any effect on the text that you are referencing. This is because when you float those li they slim down to only the space required for their content.

That being so, it is most likely because of the padding and margin in your ul that you feel that text-align is the answer. See the following code

.right ul {margin: 0;padding:0;}

And the effect that it has:

.clear {
  clear: both;
}
.menu {
  position: relative;
  height: 20%;
  text-align: center;
}
.menu:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("images/triangles.svg");
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
}
.menu li {
  float: left;
  list-style: none;
  margin-right: 5%;
}
.left,
.center,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: blue;
}
.left,
.right {
  width: 30%;
  text-align: left;
}
.left {
  left: 5%;
  margin-right: 5%;
}
.right {
  right: 5%;
}
.center {
  width: 20%;
  left: 40%;
}
a {
  color: white;
}
.right ul {
  margin: 0;
  padding: 0;
}

<div class="menu">
  <!--START-->
  <div class="left">
    <ul>
      <li><a href="#01">Element 1</a>
      </li>
      <li><a href="#02">Element 2</a>
      </li>
      <li><a href="#03">Element 3</a>
      </li>
    </ul>
  </div>

  <div class="center">
    <h1>Title</h1>
    <h3>Another Title</h3>
  </div>

  <div class="right">
    <ul>
      <li><a href="#04">Element 4</a>
      </li>
      <li><a href="#05">Element 5</a>
      </li>
      <li><a href="#06">Element 6</a>
      </li>
    </ul>
  </div>

  <div class="clear"></div>
</div>
<!--END-->

Depending on what exact layout you are trying to achieve, there are a lot of options on how to wield the power that CSS gives you here, but hopefully this is enough of a first step to lead you towards where you were hoping to get.