Layout of a page in css - html

Question

the layout I'm trying to achieve
So Im trying to achieve a layout of header shown in the picture below using HTML and CSS. I've started with doing the header and put the logo in the centre and the list business but I'm struggling with putting the logo in the centre and the list business in the corner. I've tried using text align but it hasnt worked and im sure its the float but im not sure the code i should use.
Heres my code:
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #ffe9e3;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: center;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav>
<ul>
<li>List Your Business</li>
</ul>
</nav>
</div>
</header>

Answer 1

Could make the header a flexbox and use justify and align to center the logo. Then make the nav absolute positioned to put it up in the top right corner.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
nav {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav>
<ul>
<li>List Your Business</li>
</ul>
</nav>
</div>
</header>

Answer 2

There are a couple of ways you can achieve this, but without your actual source code it is hard to work with. If you aren't using flex or grid, then I would say to set the parent element (The header container) to position relative, and then set the logo container itself to position absolute. You can then change the positioning as shown.
#hContainer {
position: relative;
width: 100%;
height: 150px;
background: skyblue;
}
#logo {
position: absolute;
color: white;
font-size: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 10px 12px;
}
<div id="hContainer">
<div id="logo">Logo</div>
</div>