Почему не появляется зеленый блок?

Question

[Denisneedyourhelp]

https://jsfiddle.net/Lyjhwnag/
И как задать стили только дочерним элементам, но не внукам?

Comments

[Виталий Киренков]

По вашей песочнице не понятно, что не так.

[Denisneedyourhelp]

Виталий Киренков,
.central-menu

Answer 1

[Андрей Dobrin]

Что Вы именно хотите сделать?
Вы сместили этот зеленый блок ниже на320px.
Уберите в классе .central-menu свойство margin-top: 320px
А чтобы задавать свойство для дочерних элементов, можно писать либо так:

parent > child{
  property : value
}

или так:

parent child{
  property : value
}

Если хочется задать свойство к одному "ребёнку", то можно сделать так:

parent::nth-child(child's number){
  property : value
}

Например:
Есть структура

ul.list
  li.list__item
  li.list__item
  li.list__item
  li.list__item

Тут вы можете задать свойства толькo для первого li, используя правило ввыше:

.list::nth-child(1){
  padding: 0 0 0 20px
}

Comments

[Denisneedyourhelp]

Спасибо)

[Андрей Dobrin]

Denisneedyourhelp, Рад был помочь)

[Denisneedyourhelp]

Андрей Dobrin, Тут такое дело... Я не могу задавать больше 2 вопросов в день.
Подскажите, как задать расстояние между flex-элементом и краем body?
Margin-left не работает...

[Андрей Dobrin]

Тут множество разных вариантов:
Можно в body добавить свойство padding: 0 10px или сколько вам угодно. Либо поместить эти flex-container - ы в еще один блок (желательно). Дать этому блоку такие свойства:

.container{
  display: flex;
  justify-content: space-between | space-around | center | и т.д.;
}

Прочитайте статейку.
Воспользуйтесь свойствами padding, align-items(если display: flex). Попробуйте все из вышеперечисленного, желательно, и поймете, как все это работает на практике. Откройте devTools (F12 или CTRL+SHIFT+I), наводите на элементы и смотрите их свойства.

Answer 2

[Анатолий]

размер header увеличьте или уменьшите размер блоков внутри него.
По поводу селекоторов см. тут.

Дочерние элементы:
element>element div > p Selects all elements where the parent is a element

Comments

[Denisneedyourhelp]

Действительно помогло, но размер менять нельзя, что делать?