'css - centering ul li in mobile [duplicate]

This is image of results

I want to center li in ul. It looks centered but slightly not. Left portion and Right portion is not exactly same.

How can I fix this problem?

.test-box {
  border: 1px solid blue;
}

.test-ul {
  text-align: center;
  list-style-type: none;
  border: 1px solid red;
}

.test-li {
  display: inline-block;
  border: 1px solid green;
}
<div class="test-box">
  <ul class="test-ul">
    <li class="test-li">real time</li>
    <li class="test-li">real time</li>
  </ul>
</div>
htmlcss


Solution 1:[1]

<ul> elements have left padding by default.

.test-ul
{
    padding-left: 0;
}


.test-box {
  border: 1px solid blue;
}

.test-ul {
  text-align: center;
  list-style-type: none;
  border: 1px solid red;
  padding-left: 0;
}

.test-li {
  display: inline-block;
  border: 1px solid green;
}
<div class="test-box">
  <ul class="test-ul">
    <li class="test-li">real time</li>
    <li class="test-li">real time</li>
  </ul>
</div>

enter image description here

vs

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mplungjan

Related Questions