How to make list and paragraph inline and float right? - html

Question

I am having trouble making my list inline along with the Sign In to the right of it. I tried putting float for the tags since every part on my header is a link, but that isn't working. Can anyone help me put the logo float left, the list to the right, with the sign in being the farthest thing right (float right pretty much for the sign in). Thanks for any answers I get, I truly appreciate it.
html:
<header>
<nav id="header-flex">
<div>
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div>
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
</div>
<div>
<p>Sign In</p>
</div>
</nav>
</header>
css:
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}

Answer 1

It can be done by giving your div's a width and assigning 'float: left' to them, like this:
HTML:
<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>
CSS:
#header-flex {
display: flex;
position: fixed;
background: rgb(0, 191, 255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
.left, .mid, .right {
float: left;
width: 33%;
}

Answer 2

<div> has display: block; by default, no need to use div for img and ul.
Also, remove the default 8px margin from body:
body {
margin: 0;
}
A nav is better to use display: block; since you want it to take the whole width.
Now you can use float: left, float: right
body {
margin: 0;
}
#header-flex {
display: block;
position: fixed;
background: rgb(0, 191, 255);
height: 75px;
width: 100%;
}
img {
float: left;
}
#header-flex>ul {
float: left;
margin: 0;
}
.sign-in {
float: right;
margin: 25px;
}
<header>
<nav id="header-flex">
<img src="logo.jpg" alt=logo width="30px" height="30px">
<ul>
<li>Shop</li>
<li>Products</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
<div class="sign-in">
Sign In
</div>
</nav>
</header>