Shitty Example MDL Page

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="./material.min.css">
	<script src="./material.min.js"></script>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
	<!-- Header -->
	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
	  <header class="mdl-layout__header">
		<div class="mdl-layout__header-center" style="text-align:center;" >
		  <span class="mdl-layout-title"><h1>Title</h1></span>
	   </header>


	 <!-- Grid (source of the problem) -->
	 <main class="mdl-layout__content">
		<div class="mdl-grid">
		  <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
		  <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
		  <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
		</div>
	</main>


	 <!-- Footer -->
	  <footer class="mdl-mini-footer">
	  <div class="mdl-mini-footer__left-section">
		<ul class="mdl-mini-footer__link-list">
		  <li>
			  <form action="#">
				<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
					<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
						<i class="material-icons">search</i>
					</label>
					<div class="mdl-textfield__expandable-holder">
					<input class="mdl-textfield__input" type="text" id="sample6" />
					<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
					</div>
				</div>
			</form>
		</li>
		</ul>
	  </div>
	</footer>
</body>