Так у тебя ж на том блоке стоит высота 50%. Конечно же он будет большим.
самый робочий вариант это такой:
.parent {
width: var(--your-width);
height: var(--your-height);
display: block;
/*это чтоб небыло тупых отступов, которые браузер дефолтно ставит*/
margin:0;
padding:0;
border:0;
}
Главное не забудь внутрений контент настроить, чтоб он не полз и не выползал за сам контеинер.
И кстати, что у тебя за названия такие А1, А2, А3...? Это, мягко говоря, плохие названия. Так лучше не делать. Называй классы так, чтоб было понятно, что делает этот класс. Если это контеинер для посковой формы, то это может быть search-container, а если же это, например, какая-то отделельная секция, по типу пост (если в фесбуке или инстагрмме), то лучше использовать для это теги такие как < section >, а не писать не понятно что. Тебе же потом через месяц (или еще когда) прийдеться на тот код смотреть, а с такими креативными названиями, тебе будет проще все заново написать, чем то читать.