div имеет этот странный край сверху. Как это исправить?

Question

надеюсь, что у вас все хорошо.

У меня есть 2 divs, которые являются встроенными друг к другу. Но по какой-то причине у div справа есть этот странный запас наверху. Как заставить оба div придерживаться вершины без каких-либо странных полей? Также я хотел бы знать, что пошло не так.

ссылка jsfiddle - https://jsfiddle.net/vynd2k85/1/

Заранее спасибо!

.context { 
    box-sizing: border-box; 
    width:49%; 
    padding: 10px; 
    background: #72ED80; 
    font-family: 'Source Sans Pro', sans-serif; 
    display: inline-block; 
    margin: 0; 
} 
.context h1 { 
    text-align: left; 
    font-size: 14px; 
} 
.context ul li {font-style: normal; margin: 0; font-size: 14px; line-height: 150%;} 

Answer 1

Это не запас, а вертикальное выравнивание. Просто добавьте вертикальное выравнивание: сверху к классу содержания:

.context { 
    box-sizing: border-box; 
    width:49%; 
    padding: 10px; 
    background: #72ED80; 
    font-family:'Source Sans Pro', sans-serif; 
    display: inline-block; 
    margin: 0; 
    vertical-align:top; 
} 

jsFiddle example

вертикальное значение выравнивания по умолчанию является базовым, которая является то, что вы видите.

Answer 2

Просмотреть обновленную скрипку.

https://jsfiddle.net/a1L8tugz/

Проблема здесь в том, что по умолчанию, что делает div инлайн выровняет его на дно, так что вы должны добавить вертикальное выравнивание, как так.

.context { 
box-sizing: border-box; 
width:49%; 
padding: 10px; 
background: #72ED80; 
font-family: 'Source Sans Pro', sans-serif; 
display: inline-block; 
margin: 0; 
vertical-align: top; 
}