Разделить тексты по центру

Хотел вкладки поставить по центру, и поставил каким-то чудом. Но тексты теперь слипнулись, и нужно отдельно поставить, и никак не получается этого сделать.

И почему-то точки появляются, после того, как поставил по центру.

.nav {
    padding-top: 27px;
    padding-bottom: 27px;

.logo {
    margin-left: 80px;
    left: 0;
    position: absolute;
} 
.navbar {
    list-style-type: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
<header class="header">
  <div class="nav">
    <div class="container">
      <div class="row">
        <div class="logo">
          <img src="img/Logo.svg" alt="logo">
        </div>
        <div class="navbar">
          <ul class="d-flex justify-content-between">
            <li class="work-tabs__item active">
              <a href="#"> Home </a>
            </li>
            <li class="work-tabs__item">
              <a href="#"> About Us </a>
            </li>
            <li class="work-tabs__item">
              <a href="#"> Services </a>
            </li>
            <li class="work-tabs__item">
              <a href="#"> Blogs </a>
            </li>
          </ul>
        </div>


Ответы (1 шт):

Автор решения: Alekosh

Использовал код снизу, и получилось так, как хотел. Полагаю у меня в предыдущем коде имеются ошибки, может исправите меня на будущее? Заранее благодарен)

ul li {
    list-style:none;
    margin-right: 32px;
}
→ Ссылка