последовательность :nth-child

У меня почему то :nth-child который должен быть 1 стал вторым и причин для этого я не вижу.
то есть <div class="HeaderButton"> который первый в структуре воспринимает значение только 2

@charset "utf-8";

/* CSS Document */



html, body{

padding: 0;

margin: 0;

background: #fff;

color: #2e2e2e;

font-family: 'Ubuntu', sans-serif, "sans-serif";

font-size: 16px;

}

a{

color: #B23730;

text-decoration: underline;

}

main{

max-width: 1280px;

margin: 0 auto;



}

header{

height: 150px;

margin: 60px 0px 0px 0px;

display: flex;

jjustify-content: space-between;

align-items: center;

}



.HeaderLogo{

text-align: center;

flex-basis: 50%;

}

.HeaderButton{

width: 320px;

display: flex;

justify-content: center;

align-items: center;

}

.HeaderButton:nth-child(2){

margin-left: 300px;

}

.Button:nth-child(1){

margin: 0px 1rem 0px 0px;

}

.Button:nth-child(2){

width: 60px;

}

.color{

color: #B23730;

}

.deviz{

font-size: 12px;

color: #2e2e2e2;

}

<main>

<header>

  <div class="HeaderLogo">

  <img src="images/logotip1.svg" width="80%" alt=""><br>

  <p class="deviz">Девиз социального приюта <span class="color">Дари добро</span></p>

  </div>

  <div class="HeaderButton">

  <div class="Button"><a href="#">Стать волонтером</a></div>

  <div class="Button"><img src="images/iconka5.svg" alt=""></div>

  </div>

  <div class="HeaderButton">

  <div class="Button"><a href="#">Помочь приюту</a></div>

  <div class="Button"><img src="images/iconka6.svg" alt=""></div>

  </div>

</header>

</main>

Ничего не понятно, запости только то что относится к вопросу

Потому что учитываются все дочерние элементы родителя.
В данном случае у header 3 дочерних элемента
- .HeaderLogo
- .HeaderButton
- .HeaderButton
Как видите .HeaderButton здесь идет вторым и третьим.

Цитата:

---

Сообщение от Proger

Потому что учитываются все дочерние элементы родителя.
В данном случае у header 3 дочерних элемента
- .HeaderLogo
- .HeaderButton
- .HeaderButton
Как видите .HeaderButton здесь идет вторым и третьим.

---

А почему тогда когда я ставлю значение 1 не чего не происходит, получается изменение должны коснуться .HeaderLogo но не касаются

Цитата:

---

Сообщение от sergei1980

когда я ставлю значение 1 не чего не происходит, получается изменение должны коснуться .HeaderLogo но не касаются

---

Потому что вы явно указываете другой класс

Цитата:

---

Сообщение от sergei1980

.HeaderButton:nth-child(...

---

спасибо