Как переместить ссылки в противоположную сторону?

Question

[Mrako_bes]

Как переместить ссылки в nav'е вправо, как показано на скрине, не используя position: relative;

Пока выходит вот это:

<header>
		<div class="wrapper">

			<div class="logo">
				<a href="#"><img src="img/logo.png" alt=""> <span>MINTO</span></a>
			</div>

			<nav>
				<div class="topnav">
					<a href="#"><img src="img/home.png" alt="">Home</a>
					<a href="#"><img src="img/about_us.png" alt="">About us</a>
					<a href="#"><img src="img/services.png" alt="">Services</a>
					<a href="#"><img src="img/contact_us.png" alt="">Contact Us</a>
				</div>
			</nav>

		</div>
	</header>

.wrapper {
	width: 78.5%;
	margin: 0 auto;
}
header .wrapper {
	display: flex;
}
.logo {
	font-size: 39px;
	font-family: "Samo-Sans";
	margin-top: 30px;
}
.logo a {
  display: flex;
  align-items: center;
  color: #a292b3;
}
.logo span {
	margin-left: 20px;
}
nav {
	margin-top: 54px;
	margin-left: 20%;
}
.topnav a {
	margin-right: 70px;
	text-align: right;
	color: #545454;
	font-size: 19px;
	font-family: "Sofia";
	font-weight: 100;
}
.topnav a img {
	margin-right: 5px;
}
.topnav a:hover {
	border-bottom: 3px solid #a292b3;
	border-radius: 3px;
}

Answer 1

[BJlaDuMup]

header .wrapper {
  display: flex;
  justify-content: space-between;
}
nav {
  margin-top: 54px;
  margin-left: 20%; - удалить
}
.topnav a {
  margin-right: 70px; - поменять на margin-left
....

Answer 2

[Александр]

nav {
  margin-top: 54px;
  margin-left: 0;
}

Comments

[Mrako_bes]

это тоже самое, что и не писать margin вовсе, просто nav прилипает к логотипу. если ты ошибся и хотел написать margin-right, то тоже не работает

[Александр]

Mrako_bes, ты задаешь отсуп от края, как он будет прилипать к краю? При том что ранее ты используешь display: flex;. Так почему через него не задать расположение? Не доходит, ну тогда бери float:right,

[Mrako_bes]

Александр, "прилипает"

пробовал justify-content: flex-end использовать, но не работает. что-то не так делаю

Answer 3

[hzzzzl]

вроде это

.topnav a:last-of-type {
  margin-right: 0px;
}