Создание простого адаптивного тянущегося меню

Демонстрация работы второго способа создание простого адаптивного тянущегося меню с помощью отображения в виде Flexbox, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<header>
	<h1>Snap-Tite Rubber Co.</h1>
	<nav>
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Basic Services</a>
		<a href="#">Specialty Services</a>
		<a href="#">Contact Us</a>
	</nav>
</header>

CSS

header {
	background-image: url(light_toast.png);
	text-transform: uppercase;
	text-align: center;
}
h1 { 
	font: 4rem "Bree Serif";
	text-shadow: -1px -1px 1px rgba(255,255,255,0.4),
		1px 1px 1px rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.6);
	padding-top: 1rem;
	opacity: 0.3;
	line-height: 1;
	margin: 1.5rem;
}
header nav { 
	font-weight: 100; 
	font-family: Agenda-Light, Agenda, Arial, sans-serif; 
}
header nav a { 
	text-decoration: none; 
	font-size: 1.4rem;
	color: #333;
	background: rgba(255,255,255,0.4);
	transition: .6s;
	padding: .5rem;
}
header nav a:list-child {
	border-right: none;
}
header nav a:hover {
	background: rgba(0,0,0,0.5);
	color: #fee;
}
header nav {
	display: flex;
}
header nav a { 
	flex: 1 1 20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 700px) { 
	header nav { 
		flex-direction: column;
	}
}