How do I increase horizontal space between my list? - html

Question

I am trying to increase the space in my inline list so that they are not stuck side by side. I have tried word spacing and adding padding to the header a links, but that hasn't worked. Also, I found the only way to make my list in order (shop, products, faq, blog) inline and floating in the centre is to put the list backwards. So when I do blog faq products shop it will show up in the order as shop, products, faq blog. I was wondering if there was a way to be able to write them in html in order and still have them display inline in order. Any help is appreciated, thanks! BTW I have
* {
padding: 0px;
margin: 0px
}
already
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .mid, .right {
float: left;
width: 33%;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Blog</li>
<li >FAQ</li>
<li >Products</li>
<li >Shop</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>

Answer 1

Try below updated snippet code
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .right {
float: left;
width: 25%;
}
.mid {
float: left;
width: 50%;
}
.mid ul{
padding: 0;
text-align: center;
}
.mid ul li{
display: inline;
list-style-type: none;
}
.mid ul li a{
float: none;
padding: 0 6px;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>

Answer 2

Why don't you write like this if you need another order?
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
or there is something I didn`t get
and for horizontal space do this
.mid li {padding: 0px, 10px,0px,10px;}