添加文本后，内联块元素将脱离内联

Question

我正在尝试做一些非常简单的事情。将这三个块以inline-block格式在我的页脚中对齐。直到我添加

才行

<div id="footer-grid3-logo">Hello</div>

致footer-grid3。为什么这个内容推动网格3不对齐？

＆＃13;

＆＃13;

footer {
	width: 100%;
	height: 400px;
	position: relative;
	bottom: 0;
	margin-bottom: 0;
	background: #696969;
}
#footer-main-container {
	width: 80%;
	height: 100%;
	margin: auto 10%;
}
#footer-grid1, #footer-grid2, #footer-grid3 {
	height: 100%;
	width: 33.3%;
	display: inline-block;
}
#footer-grid1 {
	background: blue;
}
#footer-grid2 {
	background: red;
}
#footer-grid3 {
	background: green;
}
#footer-grid3-logo {
	color: #0085A1;
	font-size: 1.2em;
}

＆＃13;

<footer>
		<div id="footer-main-container"><div id="footer-grid1">
			</div><div id="footer-grid2">
			</div><div id="footer-grid3">
			<div id="footer-grid3-logo">Hello</div>
			</div>
		</div>
	</footer>

＆＃13;

＆＃13;

＆＃13;