Как выровнять логотип слева и навигацию справа с помощью HTML и CSS ⇐ CSS

[Anonymous]

Мне нужна помощь в выравнивании логотипа слева и навигации справа с помощью HTML и CSS.
Я хочу, чтобы он был похож на это изображение >


Я пробовал разные способы изменить свой формат CSS, и это просто не сработает.
Вот мои HTML и CSS

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

body
{
margin: 0;
padding: 0;
font-family: Hoefler Text;
background-color: rgb(233, 245, 248);
}
header{
margin: 3% 10% 3% 10%;
padding: 37px 161px;
align-items: center;
}
@media screen and { (max-width: 700px)}
.header {
width: auto;
float: none;

}

.main-nav{
font-family: Hoefler Text;
font-size: .8rem;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}
.main-nav li { float: left;}

.main-nav li a {
display:block;
color:#ffffff;
text-align: center;
padding:10px 12px;
text-decoration: none;
}

.main-nav li:hover{
background: #ADD8E6;
}

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

*
[*]





[url=*]
[img]*[/img]
[/url]

[list]
[url=*]Home[/url]
[*][url=*] Education[/url]
[*][url=*] Experience[/url]
[*][url=*]Projects[/url]
[*][url=*]Contact Me[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/781 ... ml-and-css