Heading moves other menu items and aligns texts of them to its bottom

Question

Ok, I didn't really know how to describe title, but I find this a very strange. I have a very simple navbar looking like this :

	    html,body{
	    	width:100%;
	    	height: 100%;
	    	margin:0;
	    	padding:0;
	    	background: #EEE;
	    }
		.navbar-menu{
			display:block;
			color:white;
			padding:0;
			margin:0;
			background: black;
		}

		.top-navbar{
			padding: 0;
			margin:0;
			width:100%;
		}
		.navbar-menu-item{
			height:50px;
			font-family: 'Fira Sans', sans-serif;
			display:inline-block;
			background: red;
			margin:0;
			margin-right:5px;
		}
		.navbar-menu-item > *{
     		display: inline;
	    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='top-navbar'>
	    <div class="navbar-menu">
			<div class="navbar-md "> <!--hidden-xs hidden-sm -->
				<div class="navbar-menu-item">
					<span>Profile</span>
				</div>
				<div class="navbar-menu-item">
					<h2>Profile</h2>
				</div>
				<div class="navbar-menu-item">
					<span>Profile</span>
			    </div>
				<div class="navbar-menu-item">
					Profile
				</div>
				<div class="navbar-menu-item">
					Profile
				</div>
			</div>
          <!--For now
			<div class="navbar-xs hidden-md hidden-lg">
			    SOmething..
			</div>
          -->
		</div>
	</div>

Now when you run the snippet you see how all texts are bottom aligned and this moves menu items down, but they don't have margin, so it's not the cause, I don't know why is this happening since h2 element is child of .navbar-menu-item and I don't know how it's effecting other menu items. I tried searching on the google with no luck. If you are willing to answer, please include why this is happening :)

Answer 1

As @CBroe mentioned, his solutions is correct. Add .navbar-menu-item > * { vertical-align: top; }

	    html,body{
	    	width:100%;
	    	height: 100%;
	    	margin:0;
	    	padding:0;
	    	background: #EEE;
	    }
		.navbar-menu{
			display:block;
			color:white;
			padding:0;
			margin:0;
			background: black;
		}

		.top-navbar{
			padding: 0;
			margin:0;
			width:100%;
		}
		.navbar-menu-item{
			height:50px;
			font-family: 'Fira Sans', sans-serif;
			display:inline-block;
			background: red;
			margin:0;
			margin-right:5px;
            vertical-align: top;
		}
		.navbar-menu-item > *{
     		display: inline;
	    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='top-navbar'>
	    <div class="navbar-menu">
			<div class="navbar-md "> <!--hidden-xs hidden-sm -->
				<div class="navbar-menu-item">
					<span>Profile</span>
				</div>
				<div class="navbar-menu-item">
					<h2>Profile</h2>
				</div>
				<div class="navbar-menu-item">
					<span>Profile</span>
			    </div>
				<div class="navbar-menu-item">
					Profile
				</div>
				<div class="navbar-menu-item">
					Profile
				</div>
			</div>
          <!--For now
			<div class="navbar-xs hidden-md hidden-lg">
			    SOmething..
			</div>
          -->
		</div>
	</div>