ホームページのヘッダーの要素をすべて横並びにしたい

現在ホームページのヘッダーを作成しているのですが
写真のように縦に並んで困ってます。

理想としてはこのようにしたいです。

また小さいサイズにした時も縦に並んでしまうので直したいです。

色々試したのですが出来なくて困ってます。
長くなりましたがよろしくお願いします。

HTML

  <div class="inner flex">
      <h1 class="l-header-logo"><a href="/">
      <img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://copy2sample.local/wp-content/uploads/logo.png" alt="ほてい治療院">
    </a>
    </h1>
    <div class="l-header-trigger" href="">
     <span></span> <span></span> <span></span>
    </div>
    <div class="tab">
    <a href="tel:0333783338">
    <img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://copy2sample.local/wp-content/uploads/tel-sp.png" alt="03-3378-3338">
    </a>
    </div>
    
  <nav class="l-header-nav">
    <ul>
      <li>
      <a title="CONSEPT" href="#consept">コンセプト
      </a>
      </li>
      <li>
      <a title="FEATURE" href="#feature">特徴
      </a>
      </li>
      <li>
      <a title="STAFF" href="#staff">スタッフ
      </a>
      </li>
      <li>
      <a title="MENU" href="#menu">料金・メニュー
      </a>
      </li>
      <li>
      <a title="ACCESS" href="#access">アクセス
      </a>
      </li>
      <li>
      <a href="tel:0333783338">
        <img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://copy2sample.local/wp-content/uploads/tel.png" alt="03-3378-3338">
      </a>
      </li>
    </ul>
  </nav>
  </div>
</header>

CSS

.l-header{
  padding-top:.8rem;
  padding-bottom:.8rem;
  background-color:skyblue;
  position:fixed;
  top:0;
  width:100%;
  z-index:1000
}
.l-header-logo{
  width:208px
}
.l-header .tab{
  width:32px;
  margin-right:4.8rem
}
.l-header-trigger{
  display:inline-block;
  width:36px;
  height:28px;
  vertical-align:middle;
  cursor:pointer;
  position:fixed;
  top:14px;
  right:16px;
  z-index:10000
}
@media only screen and (min-width:767px){
  .l-header-trigger{
    display:none
  }
  .tab{
    display:none
  }
}
.l-header-trigger span{
  display:inline-block;
  box-sizing:border-box;
  position:absolute;
  left:0;
  background-color:rgba(74,124,79,.8);
  width:100%;
  height:3px;
  transition:all .5s;z-index:10000
}
.l-header-trigger span:nth-of-type(1){
  top:1px
}
.l-header-trigger span:nth-of-type(2){
  top:13px
}
.l-header-trigger span:nth-of-type(3){
  bottom:0
}
.l-header-trigger.active span{
  background-color:#fcfcfc
}
.l-header-trigger.active span:nth-of-type(1){
  transform:translateY(12px) rotate(-45deg)
}
.l-header-trigger.active span:nth-of-type(2){
  opacity:0
}
.l-header-trigger.active span:nth-of-type(3){
  transform:translateY(-12px) rotate(45deg)
}
@media only screen and (min-width:767px){
  .l-header-nav ul{
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
    display:flex
  }
  .l-header-nav ul li{
    margin-right:2.4rem;text-align:center
  }
  .l-header-nav ul li:last-of-type{
    width:180px;margin-right:0
  }
  .l-header-nav ul li a{
    font-size:1.4rem;color:#333
  }
  .l-header-nav ul li a:before{
    content:attr(title);
    display:block
  }
}
@media only screen and (min-width:481px) and (max-width:766px),only screen and (max-width:480px){
  .l-header-nav{
    width:240px;
    height:100%;
    padding-top:60px;
    background-color:#3f6c45;
    position:fixed;
    top:0;
    right:0;
    z-index:9999;
    transform:translate(250px);
    transition:all .5s
  }
  .l-header-nav.open{
    transform:translateZ(0)
  }
  .l-header-nav ul{
    list-style:none;
    margin:0;
    padding:0
  }
  .l-header-nav ul li{
    text-align:center;
    padding:.8rem 0
  }
  .l-header-nav ul li:last-of-type{
    display:none
  }
  .l-header-nav ul li a{
    color:#635353;
    font-size:1.4rem
  }
}