Changing to position fixed, bad display

I have a menu bar for my website:it's in the default position, but I want a fixed menu bar!
When I put "position:fixed", it doesn't display correctly(in a browser). Please help me.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	z-index:99;
	cursor: pointer;
  position:fixed;
}
li {
	font-family:odin rounded;
	font-size:40px;
    float: left;
	height:55px;
	background-color:rgb(249,249,249);
	width:20%;
	border-right:1px solid black;
	transition:color 1s, background-color 1s
}
li:hover	{
	color:white;
	background-color:black;
}
li a {
	
    display: flex;
	display: -webkit-flex;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

img.logo	{
	height:55px;
	width:auto;
	position:fixed;
	top:8px;
	z-index:99;
}
.text		{
	display:flex;
	align-items:center;
	text-align:center;
	justify-content: center;
}
a.main:hover {
	background: transparent url('main.html');
	cursor: pointer;
}

<body>
<div>
	<ul class="barre">
		<li class="text"><a href="main.html"><img class="logo" src="https://thumb.ibb.co/kPPHmo/logo.png" alt="problem"></a><pre style="font-family:odin rounded">    Team NoMaD</pre></li>
		<li class="text" onclick="location.href = 'main.html';">Menu</li>	
		<li class="text" onclick="location.href = 'members.html';">Membres</li>	
		<li class="text" onclick="location.href = 'calender.html';">Calendrier</li>
		<li class="text" onclick="location.href = 'contact.html';">Contact</li>
		
	</ul>
</div>
</body>

The menu isn't in one line: with a width 100%;it's not in one line... And in a browser, it's not beautiful!

Solution

You need to just add width:100%; in ul like below

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	z-index:99;
	cursor: pointer;
  position:fixed;
  width:100%;
}
li {
	font-family:odin rounded;
	font-size:24px;
    float: left;
	height:55px;
	background-color:rgb(249,249,249);
	width:20%;
	border-right:1px solid black;
	transition:color 1s, background-color 1s
}
li:hover	{
	color:white;
	background-color:black;
}
li a {
	
    display: flex;
	display: -webkit-flex;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

img.logo	{
	height:55px;
	width:auto;
	position:fixed;
	top:8px;
	z-index:99;
}
.text		{
	display:flex;
	align-items:center;
	text-align:center;
	justify-content: center;
}
a.main:hover {
	background: transparent url('main.html');
	cursor: pointer;
}

<div>
	<ul class="barre">
		<li class="text"><a href="main.html"><img class="logo" src="https://thumb.ibb.co/kPPHmo/logo.png" alt="problem"></a><pre style="font-family:odin rounded">    Team NoMaD</pre></li>
		<li class="text" onclick="location.href = 'main.html';">Menu</li>	
		<li class="text" onclick="location.href = 'members.html';">Membres</li>	
		<li class="text" onclick="location.href = 'calender.html';">Calendrier</li>
		<li class="text" onclick="location.href = 'contact.html';">Contact</li>
		
	</ul>
</div>