Line up Title inside navbar

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;
 }