Как выставить ссылки хедера в ряд?

Question

[Dishbeat]

Имеется задача - сверстать шапку сайта с навигацией и лого. Не удается выстроить ссылки навигации по сайту в ряд. Использовал Display: flex

Исходник:

<header class="header">
    <div class="container header-container">
    <a href="#" class="logo">
      <img src="img/Logo.png" alt="Lionic Logo" class="logo-img">
    </a>
    <nav class="nav">
      <ul class="nav-lsit">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Products</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Our Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About us</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contacts</a>
        </li>
      </ul>
      <a href="#" class="btn">
        FREE TRIAL
      </a>
    </nav>
    </div>
  </header>

Стилизация:

* {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
}

a {
    text-decoration: none;
}


ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1170px;
    margin-right: auto;
    margin-left: auto;
}

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

.logo {
    margin-right: auto;
}

.nav-list {
    display: flex;
}

.nav-item:not(:last-child) {
    margin-right: 50px;
}

Заранее спасибо!

Comments

[0xD34F]

3.1

[Dishbeat]

0xD34F, Исправлено?

[Alexander Bazhenov]

У тебя в HTML класс у UL тега неверный) "nav-lsit" заместо "nav-list" :)

Answer 1

[Алексей]

Dishbeat держи https://codepen.io/edenhard/pen/LYJGMdb