Удалите прокладку или маржу

Question

У меня есть загрузочный контейнер, но по какой-то причине внизу контейнера есть зазор.

Правая колонка не подходит ко дну.

Вопрос: Как я могу сделать правый столбец фона до конца или удалить, что зазор находится внизу контейнера div?

CodePen Preview

CSS

body { 
    padding-top: 64px; 
    background: #F0F0F0; 
} 

.gap-md { 
    margin-top: 2rem; 
    margin-bottom: 2rem; 
} 

.gap-sm { 
    margin-top: 1rem; 
    margin-bottom: 1rem; 
} 

#body-image { 
    background: url(../../../images/blue-print-2.jpg); 
    min-height: 380px; 
} 

.container { 
    background-color: #fff; 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12); 
    margin-top: -10rem; 
    padding: 0; 
} 


.profile-stats { 
    padding: 2rem; 
    background: #F7F7F7; 
    height: 100%; 
} 

Answer 1

Ваш h2 имеет запас по нему и вместе с вашей matchheight скрипт создает дополнительный в нижней части информационной секции профиля, потому что вы позволяете переполнения на коробке так что маржа для h2 ударяет по содержащему div вместо .box div, вы можете добавить overflow:hidden в ваш .box или просто удалить границу с вашего h2 и вместо этого добавить к ней дополнение или что-то вроде следующего:

либо

.box{ 
    overflow:hidden; 
} 

или

h2{ 
    margin:0; 
    padding:15px 0; 
}