Logo ortalama sorunu | Cevap #755

Merhaba, Front-End tasarım 2 videosunu izleyerek yapmaya çalıştığım header kısmında logo ortalama problemiyle karşılaşıyorum. Sorunum tam olarak şu; sol ve sağda bulunan yazılar değiştikçe veya logo da sola veya sağa kayıyor fakat benim istediğim logonun %100 width üzerinden ortalanması ve sol veya sağda bulunan yazılar değiştikçe onun da yerinin değişmemesi. Kodlarım aşağıda.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>xlogox</title>
    <link rel="stylesheet" href="assets/libs/css/style.css">
    <link rel="stylesheet" href="assets/libs/css/normalize.css">
  </head>
  <body>
    <header class="header">
      <div class="container">
        <nav class="left">
          <ul>
            <li>
              <a href="">DENEME</a>
            </li>
          </ul>
        </nav>
        <div class="logo">
          <a href="">
            <img src="assets/img/logo1.png" alt="xlogox">
          </a>
        </div>
        <nav class="right">
          <ul>
            <li>
              <a href="">DENEME</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </body>
</html>

.container {
    width: 1420px;
    margin: 0 auto;
}

.header {
    background: #1c1c1c;
}

.header .container {
    display: flex;
    align-items: center;
    height: 70px;
}

.header .container ul li a {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 14px;
    color: white;
}

.header .container ul li a:hover {
    text-decoration: underline;
}

.header .logo {
    margin: auto auto;
}