Why is this getting out of the line? - css

Question

How to make the "specialLi" aligned? By making li items inline-block its working but why?
Current Output:
About Menu Contact
Goumet au Catering
Desired:
Goumet au Catering About Menu Contact
I'm very new to web dev and I can't properly understand css basic things, what are some good resources that will help me get on the right track?
body {
margin: 0;
padding: 0;
}
.bar {
padding: 10px;
background: #333;
}
.navigation {
text-align: right;
margin: 0;
list-style: none;
border: 2px solid darkred;
}
.navigation li {
/*float: right;*/
border: 2px solid hotpink;
display: inline;
padding: 5px;
}
.navigation li a {
color: white;
display: inline-block;
border: 2px solid blue;
text-decoration: none;
padding: 10px;
}
.navigation li a:hover {
background: lightblue;
}
#specialLi {
float: left;
}
<nav class="bar">
<ul class="navigation">
<li id="specialLi"><a id="specialLi" href="#"> Goumet au Catering </a></li>
<li> About </li>
<li> Menu </li>
<li> Contact </li>
</ul>
</nav>

Answer 1

Youre facing multiple issues here.
Duplicated id specialLi:
Your id specialLi is used twice, id's are supposed to be unique tho.
Theres no need to do that, its enough to put the id on the li. If you need to target the a inside that li just use li#specialLi a as selector.
float:
The float:left on your id specialLi causes the matched li element to switch to block level behaviour which causes the paddings to properly appear (which doesnt actually work on inline-elements). As you only float the #specialLi all other li stay on inline level behaviour. This causes the inconsistent behaviour.
This automatic switch to block level behaviour is described in the float documentation.
As float implies the use of the block layout, it modifies the computed value of the display values, in some cases: [...]
You can solve this problem by applying display:inline-block to all of your li elements to cause consistent behaviour.
body {
margin: 0;
padding: 0;
}
.bar {
padding: 10px;
background: #333;
}
.navigation {
text-align: right;
margin: 0;
list-style: none;
border: 2px solid darkred;
}
.navigation li {
/*float: right;*/
border: 2px solid hotpink;
display: inline-block;
padding: 5px;
}
.navigation li a {
color: white;
display: inline-block;
border: 2px solid blue;
text-decoration: none;
padding: 10px;
}
.navigation li a:hover {
background: lightblue;
}
#specialLi {
float: left;
}
<nav class="bar">
<ul class="navigation">
<li id="specialLi"> Goumet au Catering </li>
<li> About </li>
<li> Menu </li>
<li> Contact </li>
</ul>
</nav>