header { display: flex; justify-content: space-between; align-items: center; align-content: stretch; background-color: $header_bg_color; color: $header_text_color; padding: 0 30px; h1 { margin: 0; a { display: block; padding: 0 20px; color: $header_text_color; font-size: $font_size; text-decoration: none; } } nav { display: flex; justify-content: left; margin: 0 20px; flex: 1 1 100px; } nav a, a.login { display: block; margin: 0; padding: 10px 20px; border-radius: 0; color: $header_text_color; font-size: $nav_font_size; text-decoration: none; &:hover { background-color: darken($header_bg_color, 10%); color: $page_link_hover_color; } &.current { background-color: $header_border_color; } &:focus { background-color: darken($header_bg_color, 10%); box-shadow: none; } } }