Navigation looks wrong when it's fixed - html

Question

I want the position of my navigation to be fixed. But when I change the position to "fixed" in nav, it looks very weird.
Here are two examples:
Without fixed position: https://jsfiddle.net/Timowo/3nrvch3c/
<nav>
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
With fixed position: https://jsfiddle.net/Timowo/5aock5k1/
<nav style="position: fixed;">
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
What do I have to change so it's inline but also fixed?
Thanks!

Answer 1

With position:fixed the element will collapse to the width of the widest descendant..in the absence of a defined width.
Just set width:100%
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
background-color: red;
}
nav {
transition: all 0.2s ease-in-out;
position: fixed;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
nav ul li.logo {
padding: 14px;
float: left;
}
nav ul li.logotext {
font-family: Futura;
color: white;
font-size: 1.3em;
padding: 28px;
text-shadow: 3px 3px black;
}
nav ul li.category a {
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 1.2em;
float: right;
font-family: Futura;
text-shadow: 3px 3px black;
}
nav ul li.category:hover a {
background-color: #212121;
}
nav ul li.active a {
background-color: #212121;
}
<nav>
<ul>
<li class="category">Contact
</li>
<li class="category">Work
</li>
<li class="category active">Home
</li>
<li class="logotext">Logo</li>
</ul>
</nav>