<ul> causes neighbouring div to fall - html

Question

When you uncomment the unordered list tag the second container div falls a bit down. If you actually could explain me why this is happening and told me how to remove this behavior I would be thankful.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
text-align: center;
color: rgb(38, 48, 90);
}
ul {
list-style-position: inside;
display: block;
}
<div class="container">
<h1> Depr </h1>
<!--<ul>
<li>Derping</li>
<li>Derping</li>
</ul>-->
</div>
<div class="container">
<h1> Derpina</h1>
</div>

Answer 1

The main reason behind why this occurs is, when you make any element to be inline-block, it aligns to baseline by default. So, when the heights of all elements are not same, it gets scrambled and aligned to their baseline. This is the main problem with all the inline-block and we should correct it by giving the right vertical alignment. To do that, please follow the below snippet:
I found your issue to be vertical alignment. Just give:
.container {
vertical-align: middle; /* This */
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255,255,255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
text-align: center;
color: rgb(38, 48, 90);
}
Preview
Without the <ul> and with it:
JSBin: http://jsbin.com/zalagixovu/edit?output