Заголовок с логотипом.img и разделом навигационной панели. ⇐ CSS

[Anonymous]

У меня возникли проблемы с созданием раздела заголовка для проекта целевой страницы продукта FreeCodeCamp. Я хочу, чтобы логотип-img находился в левой части веб-сайта, а ссылки на панели навигации располагались на равном расстоянии друг от друга в правой части веб-сайта.
Я пытался решить эту проблему, создав гибкий блок и т. д., но, похоже, не получил того, что хочу. Мне было интересно, может ли кто-нибудь с большим опытом помочь мне, объяснив, что я делаю не так с моим кодом.

Код: Выделить всё

:root {
--light-pink: #f2e3e6;
--mild-pink: #ed83b5;
--dark-pink: #ec297b;
--yellow: #fff486;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
background-color: var(--mild-pink);
}

header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
position: fixed;
top: 0;
background-color: var(--light-pink);
border-bottom: 5px solid var(--yellow);
width: 100%;
}

#nav-bar {
align-items: end;
justify-content: space-between;
flex-direction: row-reverse;
color: var(--dark-pink);
font-family: "League Spartan", sans-serif;
font-weight: 600;
font-style: normal;
font-optical-sizing: auto;
}

#nav-bar li {
list-style: none;
}

#nav-bar a {
display: block;
padding: 10px 30px;
cursor: pointer;
font-size: large;
transition: text-indent .3s ease-in-out;
}

Код: Выделить всё

[*]





[img]./images/rebel01.png[/img]

[list]

[url=#about-us][/url]About us
[*]
[url=#contact-us][/url]Contact us
[*]
[url=#collections][/url]Collections
[/list]

Подробнее здесь: https://stackoverflow.com/questions/785 ... ar-section