Ссылки в шапке идут с начала а не с конца хотя свойтсво flexend применил. Может еще что-то не написал?

Question

[Alexxxey_enot]

<header class="header">
		<div class="container">
			<div class="header__inner">

				<div class="nav">
					<a href="#" class="nav__link">Sign Up</a>
					<a href="#" class="nav__link">Log In</a>
					<a href="#" class="nav__link">Support</a>
				</div>			

			</div>
		</div>
	</header>

CSS:

.container{
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.header{
	display: flex;
	padding-top: 50px;
}

.header__inner{
	position: absolute;
	justify-content: flex-end;
}

.nav{
	font-size: 19px;
	color: #b7bfc5;
	position: relative;
}

.nav__link{
	text-decoration: none;
}

Comments

[Фёдор]

Попробуйте применить к классу .nav свойство flex-end

Answer 1

[Ankhena]

Не очевидно, какого результата нужно достичь, но
посмотрите https://jsfiddle.net/x6mrLqsy/
я рамочками обвела каждую из оберток, чтобы вы увидели что у вас происходит.

Дальше, вы пишете

.header__inner{
  position: absolute;
  justify-content: flex-end;
}

но justify-content не работает без display: flex
И не ясно зачем ему абсолют. Еще и при том, что нет ни одного родителя с relative.
Зачем-то родителю .header__inner задан flex, хотя в нем один ребенок, да и тот абсолют.

Вероятно, вы хотели получить такой результат https://jsfiddle.net/84xh0f1r/

Comments

[Alexxxey_enot]

прочитал стало понятно спасибо за развернутый ответ

Answer 2

[Anonimmus]

Position: absolute - делает ваш блок плавающим, тобишь указав ему left: 0 или right: 0. Вы его спозиционируете, а вот от какого элемента - неизвестно, плавающий блок должен иметь родителя с position: relative (от кого отталкиваться).
Пример вам уже написали ☝️выше