CSS hizalama yardımı

İyi akşamlar. Elimde bir css+HTML menu kodu mevcut. Bu kodun HTML halinde ki kategorilerini sayfa da Center hizalamak istiyorum. Text-align:center denedim olmadı float:center denedim olmadı. Yardımcı olabilecek biri var mı?
Görselde ki üst menüde teknoloji haberler vs ortalamak istiyorum. Umarım derdimi anlatabilmişimdir.

.second-menu{left:0;right:0;top:48px;max-width:100%;position:fixed;z-index:5;background:#fff;height:35px;line-height:12.5px;font-size:13.5px;font-weight:500;box-shadow:0 2px 6px 0 rgba(0,0,0,.1);border-top:1px solid #a9a9a957;transition:all .5s ease}
.second-menu ul{width:max-content;margin:0}
.second-menu ul li{float:left;font-size:12px;padding:4px 8px;display:block;text-align:center;text-transform:uppercase}
.second-menu ul li a:hover{color:#2962ff;border-bottom:2px solid #49ACE1}
.second-menu ul li a{color:#444;padding:8px 5px}
.second-menu ul li.satu1{padding:0;position:fixed;left:-1px;display:none}
.second-menu ul li.satu1 span{background:#0099bc;padding:11.5px 10.5px 10px;color:#fff;vertical-align:-5px}
.second-menu ul li.satu1:after{content:'';display:inline-block;position:absolute;border-left:12px solid #0099bc;border-top:8px solid transparent;border-bottom:8px solid transparent;right:-10px;top:2px}@media screen and (max-width: 800px)}
.second-menu{display:block;overflow:scroll;overflow-y:hidden}
.second-menu:hover{padding-bottom:0!important}}

<div class='second-menu'>
  <ul>
   <li><a href='#'>Teknoloji</a></li>
   <li><a href='#'>Haberler</a></li>
   <li><a href='#'>Sosyal Medya</a></li>
   <li><a href='#'>Bilgisayar</a></li>
   <li><a href='#'>Mobil</a></li>
   <li><a href='#'>Sıcak Fırsatlar</a></li>
  </ul>
</div>

css kodundaki aşağıdaki alanı şu şekilde denermisiniz.

.second-menu ul{width:max-content;margin:auto;padding-top:8px;}

Oldu hocam çok teşekkür ederim.