Why is the child block popping out of the parent block?

Question

css

Hello. There is a code - https://codepen.io/gififi/pen/dddGYQ . Why are buttons above buttonsBlock? There is a suspicion that this is due to the buttons li a, but then how to make volumetric buttons and so that they fit into the block normally? padding: 10px;

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);