JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
	
	<div class = "nav">
		<header>
			<div class = "navLink" id="story-scroll">Our Story</div>
			<div class = "navLink" id="menu-scroll">Menu</div>
			<img src = "https://placekitten.com/200/300" id="logo" lt="logo">
			<div class = "navLink" id="press-scroll">Press</div>
			<div class = "navLink" id="contact-scroll">Contact</div>
		</header>
	</div>

	<div class = "container">

		<div class = "content">
			<div id= "splash container"> 
				<img id = "l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
			</div>

</body>
</html>

CSS

header
{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	background: #fffaf0;
	position: sticky;
	width:100%;
	top:0;
	font-family: 'Montserrat', sans-serif;
	/*font-family: 'Gotham-Light', gotham;*/
	font-weight: 300;
	font-size: 1vw;
}

body 
{
	max-width: 100%;
    overflow-x: hidden;
    padding: 0px;
	margin: 0px;
	color: #fffaf0;
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;

}

.nav
{
	position: -webkit-sticky;
	position: sticky;
	top: 0%;
	color: #80985d;

}


.navLink
{
	padding: 0 10px;
	font-weight: 300;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
}

#logo
{
	margin-top: 4px;
	margin-bottom: 4px;
	width: 4%;
	height: 4%;
	cursor: pointer;
}
.container
{
	display: grid;
	grid-template-columns: [content] 1fr [images] 1fr
}

.content 
{
	grid-column: content;
	background: #2f6e84;

}


#l-splash
{	
	width: 100%;
	height: 100vh;
	overflow: auto;
}