<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>
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; } }