привязав Lo go и Company слева и панель навигации справа

Question

Я задаю стиль заголовку и панели навигации для целевой страницы. Моя цель - разместить название компании - <h1> рядом с lo go - <img>. Однако мне нужно, чтобы панель навигации была сдвинута вправо. Панель навигации также должна реагировать на ширину страницы. Я включил базовое c изображение того, что я пытаюсь сделать. Моя цель - иметь возможность заменить Lo go и название компании практически на любое изображение или имя в будущем. Весь заголовок необходимо закрепить вверху.

* {
  box-sizing: border-box;
  font-size: 10px;
  margin: 0px;
  padding: 0px;
}

h1 {
  font-size: 3rem;
}

#header-img {
  height: 3rem;
}

#nav-link {
  list-style-type: none;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav > ul {
  display: flex;
  justify-content: space-around;
}

#nav-bar {
  width: 35vw;
}

<header id="header">
    <img 
    id="header-img" 
    src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" 
    alt="">
    <h1>Company Name</h1>
    <nav id="nav-bar">
        <ul>
            <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li>
        </ul>
    </nav>
</header>

Answer 1

Вставьте Lo go - <img> и название компании - <h1> в его собственное div и используйте display: flex;, чтобы они выровнялись по горизонтали.

* {
  box-sizing: border-box;
  font-size: 10px;
  margin: 0px;
  padding: 0px;
}

h1 {
  font-size: 3rem;
}

#header-img {
  height: 3rem;
}

#logo-companyname {
  display: flex;
}

#nav-link {
  list-style-type: none;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav > ul {
  display: flex;
  justify-content: space-around;
}

#nav-bar {
  width: 35vw;
}

<header id="header">
  
  <div id="logo-companyname">
    <img id="header-img" src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" alt="">
    <h1>Company Name</h1>
  </div>
      
    <nav id="nav-bar">
        <ul>
            <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li>
        </ul>
    </nav>
</header>