CSS - nav out of place - html

Question

I made some changes to add an extra link to my nav but it was not inline as below you can see "Credit" was push to next line. I try make changes to position or display in css but still nothing happens.
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: 0;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
display: block;
width: 280px;
height: 50px;
}
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Browse CD</li>
<li> Search</li>
<li> Order</li>
<li>Credit</li>
</ul>
</nav>

Answer 1

I think this is because of the width.
In your case,each li element is a block of width 280px.
280*4 =1120px -total width of the li elements excluding 'Credits'.
Most users now surf with a browser set to 1024 x 768 or larger.However,if its below this,the 'Credits' would go to the next line.
This would be the case with you too!
So try decreasing the total width and always try keeping it to a max of 1000 or below that.

Answer 2

Hi I did a few things here:
Use box-sizing to ignore any padding around the elements so they will always fit
Use 20% width now that you have 5 items in your nav list instead of 4 (25%)
Use margin:0 and padding:0 on li so they don't add any extra space
* {
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#nav
{
list-style: none;
margin: 0;
padding: 0;
}
#nav li
{
font-size: 24px;
width: 20%;
float: left;
margin:0;
padding: 0;
}
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Browse CD</li>
<li>Search</li>
<li>Order</li>
<li>Credit</li>
</ul>
</nav>

Answer 3

Most answers suggest changing the width of the li tags and whatnot, while this will work for a while there will still be a point where the lis either overlap or are forced onto a new line. I suggest adding a media query and changing the style when the user's screen is too small:
#nav {
list-style: none;
display:flex; /*New: allows us to use flex:1;*/
margin: 0;
padding: 0;
}
#nav li {
font-size: 24px; /*NB: Try using a different unit: pt, em, rem, etc...*/
flex:1; /*All items are the same size*/
height: 50px;
}
#media (max-width: 700px) {
#nav{display:initial;}
}
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Browse CD</li>
<li> Search</li>
<li> Order</li>
<li>Credit</li>
</ul>
</nav>