JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<!-- ND Web Design Standards Recommended header -->
		<header id="ND-standard-header" role="banner"> 
				<a href="http://nd.edu" id="banner-link">
					University
				</a>
		</header>

		<div id="3-column-layout">
		<!-- Menu on the far left-hand side -->
			<nav class="main-menu-container">
				<ol>
					<li>About</li>
					<li>Events</li>
					<li>Join Us</li>
					<li>Sign In</li>
				</ol>
			</nav>

			<!-- Nests the center and right conent areas -->
			<div id="middle-right-column-group">
				<!-- Banner with 4HS logo -->
				<div id="logo-banner-container">
					<div id="logo-banner">
						<img src="http://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" alt="Logo" id="logo">
					</div>
				</div>

				<!-- Main, scrollable content area with footer at bottom -->
				<main id="main-content-container">
					Main content here
					<footer></footer>
				</main>
			</div>
		</div>
	</body>

CSS

/* TO DO:
	- Add ND official font to banner
	- Center logo
*/

* {
	padding: 0;
	border: none;
	margin: 0;
}

html {
		/*background: url(../img/background-stonehenge.png) no-repeat center center fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
  	 -o-background-size: cover;
  		background-size: cover;*/
    background: #f32;
}


/**** BANNER */
#ND-standard-header {
	/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
	background: -prefix-linear-gradient(top, #0B3A70, #002b5b 85%, #001b47);
	/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
	background: linear-gradient(to bottom, #0B3A70, #002b5b 85%, #001b47);
	/*background-color: 	#002b5b;*/
	height: 50px;
	padding-left: 25px;
	line-height: 3.5em;
	margin: 0px;
	font-size: 	15px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: white;
	font-weight: normal;
	font-family: "Adobe Garamond Pro", Garamond, Georgia, Times, "Times New Roman", serif;
}

/* For "of" in banner at top */
i {
	text-transform: none;
}

a:link#banner-link {
	color: inherit;
	text-decoration: none;
}

a:visited#banner-link {
	color: inherit;
	text-decoration: none;
}


/**** 3-COLUMN LAYOUT */
.main-menu-container {
	width: 15%;
	float: left;
}

#middle-right-column-group {
	float: right;
	width: 85%;
}

#logo-banner-container {
	width: 30%;
	float: left;
}


/**** NAV BAR */
ol {
	padding-top: 50px;
}

nav li {
	list-style-type: none;
	padding: 25px 15px;
	/*background-image: url(../img/yellow-nav-arrow.png);*/
    background-color: #f23;
	background-repeat: no-repeat;
	background-position: left center;
	color: #002b5b;
	font-size: 1.2em;
	font-family: "Adobe Garamond Pro", Garamond, Georgia, Times, "Times New Roman", serif;
}


/**** LOGO BANNER */
#logo-banner {
	width: 95%;
	height: 430px;
	margin-right: 0px;
	font-size: 0;
	background-color: rgba(250, 250, 250, 0.4);
}

img#logo {
	width:...