Почему дочерний блок вылазит из родительского?

Question

[ellz]

Привет. Есть код - https://codepen.io/gififi/pen/dddGYQ . Почему кнопки выше buttonsBlock? Есть подозрение, что это из-за padding: 10px; в buttons li a, но тогда как сделать объемные кнопки и чтобы в блок нормально вписывались?

Comments

[Ankhena]

1. Как должно выглядеть?
2. Задайте фон или обведите рамками ul и li - вам станет понятнее почему элементы стоят так, как стоят.
3. Используйте флексы. Флоаты не для этого.
4. Объем это тени.

[ellz]

Ankhena, так должно быть. Флексы не помогают. Да, не объем а размер.

[Ankhena]

ellz, в смысле не помогают?
https://codepen.io/anon/pen/GQQozo
ширину ul или отступы li сами добавьте

[ellz]

Ankhena, display block не поставил для a. Теперь помогло. Спсибо

Answer 1

[Александр]

.buttonsBlock{
  height: 50px;
}
.Buttons ul{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
.Buttons li{
    padding: 4px;
}
.Buttons li a{
  display: block;
    padding: 10px;
    color: #ffffff;
    font-size: 18px;
    background: rgba(165,219,226,1);