Line up Title inside navbar - html

Question

Trying to get a title to appear inline between the Logo and the navbar links. I'm trying to learn without bootstrap first and ideally without flexbox (want to know the basics first).
I've been trying 'display: inline' and different 'position' values in different spots but I'm getting lost.
#header-img {
margin-left: 20px;
margin-top: 10px;
height: 100px;
width: 100px;
float: left;
}
#nav-bar {
text-align: right;
padding: 20px;
background-color: #A7A7A9;
}
li {
display: inline;
list-style: none;
}
ul {
top: 5px;
left: 10px;
}
.nav-link {
width: auto;
height: 50px;
margin-left: 40px;
margin-top: 25px;
display: inline-block;
color: #453F3C;
font-size: 20px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
<header id="header">
<div class="logo">
<img id="header-img" alt="company logo" src="https://preview.ibb.co/jabJYd/rocket_1976107_1280.png">
</div>
<h1>Title</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>

Answer 1

to learn more about css positioning use the following link : https://www.w3schools.com/Css/css_positioning.asp and to learn more about positioning read this article : https://www.w3schools.com/Css/css_inline-block.asp
You also need to look at using percentages for your widths.
In your code, the navbar and the title are the two parent elements which need to be positioned and assigned widths in percentages for responsiveness. like this;
#nav-bar {
text-align: right;
background-color: #A7A7A9;
width: 79%;
float: right;
margin-top: 12px;
display: inline-block;
}
For the title :
h1{
display: inline-block;
width: 18%;
min-width: 77px;
float: left;
}
For the ul element in the navbar :
ul {
top: 0px;
left: 0px;
padding-left: 0px;
}
finally for the .navlinks :
.navlink{
width: auto;
margin-right: 7%;
display: inline-block;
color: #453F3C;
font-size: 19px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}

Answer 2

I am new to development as well but I think what you are trying to do is the following.
HTML:
<nav id="nav-bar">
<ul>
<div class="new_div"><h1>Title</h1></div>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
CSS:
.new_div{
float: left;
}
I just added the title as a new div inside the navigation menu and float it left. If there is a logo in between then you can add it in the navigation list and float it left.

Answer 3

You could use
header * {
display: inline;
}
to put everything inside <header> </header> inline.
If you plan to use the header tag elsewhere use a class or an id.
header.top-bar * {
display: inline;
}
To keep all with the same background:
header.top-bar {
width: 100%;
background-color: #A7A7A9;
}
Hope it helps you!

Answer 4

.header h1{position:absolute; left:50%; transform:translateX(-50%); }
Now it's centered between the logo and navigation. By setting the top property you can vertically move the element. Make sure you parent element's position set to relative.