Flexbox - nawigacja nie zajmuje 100% swojej szerokości

Question

Witam,
Tworzę header strony z wykorzystaniem flexbox i natknełam się na pewien problem.
Nadałam całemu headerowi display:flex i flex-direction:column. Nawigacji(ul) również display:flex. W konsoli zauważyłam, że nawigacja nie zajmuje 100% swojej szerokości. Poniżej zamieszczam screen i fragment kodu. Będę wdzięczna jeśli ktoś wytłumaczy mi gdzie popełniłam błąd.
Pozdrawiam

 

	<header class="header">
   		<h1 class="header__title">the time is<span class="header__title-word">now</span></h1>
			<nav class="nav">
				<ul class="nav__list">
					<li class="nav__item"><a class="nav__link" href="#">intro</a></li>
					<li class="nav__item"><a class="nav__link" href="#">gallery</a></li>
					<li class="nav__item"><a class="nav__link" href="#">servieces</a></li>
					<li class="nav__item"><a class="nav__link" href="#">contact</a></li>
				</ul>
			</nav>
   </header>

*{
    box-sizing: border-box;
}
.nav{
	margin-top:5%;
	
	&__list{
		display: flex;
	}
	
	&__item{
		flex: 1;
		padding-right: 5%;
	}
	
	&__link{
		color: #fff;
	}
}

.header{
	width: 94%;
	height: 80vh;
	position: relative;
	margin: 0 auto;
	background: url(../assets/herobanner.jpg);
	background-size: cover;
	background-position: center bottom;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	&__title{
		font-size: 3.5em;
		font-family: $base-font-family;			
		position: relative;
		white-space: nowrap;
		letter-spacing: 0.05em;
		z-index: 1;
		line-height: 1;
		color: $color-violet;
		font-weight: 600;
	}
	
	&__title-word{		
		position: absolute;
		top: 50%;
		left:50%;
		transform: translate(-50%, -60%);			
		font-size: 3.5em;
		font-family: 'Playfair Display', serif;
		letter-spacing: 0.0625em;
		color: #fff;
		z-index: -1;
		
	}
}

 

Comments

A gdzie jest napisane, że  ma tyle zajmować?

Answer 1

Ustawiając układ kolumnowy zmieniasz main na cross axis. Przez to align- Item odnosi się do osi x. Ustawiając center masz taki efekt jak widać.

Comments

Tak wiem, że centruje według osi x poprzez align-items. Nie rozumiem tylko dlaczego nie zostają uwzględnione paddingi nadane na li,bo gdy usunę padding right to właśnie cała zawartość nav zajmuje te 288.2px szerkości.