List Navigation elements from left to right - html

Question

I am trying to list navigation elements from left to right like this:
Start Über Weitere Kontakt instead of this
Start
Über
Weitere
Kontakt
but it doesn't seem to work. I have already tried using float: left;
,display:inline; and list-style: none; on #navigation li but it just stays the same.
This is the navigation structure in the index.html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body header {
top: 0;
left: 0;
display: flex;
position: absolute;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 30px 100px;
}
#navigation {
display: flex;
justify-content: center;
align-items: center;
}
#navigation li {
display: inline;
position: absolute;
}
<header>
Logo
<ul class="navigation">
<li>Start</li>
<li>Über</li>
<li>Weitere</li>
<li>Kontakt</li>
</ul>
</header>

Answer 1

You have given ul a class="navigation"
But the problem is that in your CSS you are using the id selector
#navigation
Jsut change it to class selector:
.navigation
Also, to achieve your goal position is not required.
The Following Code is Sufficient.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.navigation {
display: flex;
align-items: center;
}
.navigation li {
display: inline;
padding: 0 10px;
}
<header>
Logo
<ul class="navigation">
<li>Start</li>
<li>Über</li>
<li>Weitere</li>
<li>Kontakt</li>
</ul>
</header>

Answer 2

If I understood right, here is the solution.
body {
font-family: sans-serif;
box-sizing: border-box;
}
header {
display: flex;
flex-direction: row;
}
.logo{
margin: 0 30px 0 0;
}
.navigation {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
}
.navigation li {
margin: 0 10px 0 0;
padding: 0 10px 0 0;
}
<header>
<div class="logo">Logo</div>
<ul class="navigation">
<li>Start</li>
<li>Über</li>
<li>Weitere</li>
<li>Kontakt</li>
</ul>
</header>