Как применить position: fixed для flexbox'a

Question

Делаю лендинг, ни как не получается закрепить навигационною панель с заголовком вверху страницы. При применение position: fixed уезжает верстка вместе с боксами. Хочу добиться того, чтобы навигационная панель была справа, а заголовок с картинкой слева.

Что не так делаю?

* {
  box-sizing: border-box;
}

#container {}

#header {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  background-color: green;
  top: 0;
  align-items: center;
}

#header h2 {
  flex-grow: 1;
  font-family: Andale Mono, monospace;
}

#form h2 {
  font-family: Snell Roundhand, cursive;
}

#header-img {
  width: 75px;
}

#nav-bar li {
  list-style-type: none;
  display: inline-block;
  padding: 10px;
  font-family: Andale Mono, monospace;
}

#nav-bar a {
  text-decoration: none;
  color: black;
}

<div id="container">
  <header id="header">
    <img id="header-img" src="https://as2.ftcdn.net/jpg/01/41/51/75/500_F_141517522_9Os1QIkhD23nqLQ0xmmeIKhyYcXwO5QN.jpg">
    <h2>Product lending page by Dergunov Ilya</h2>
    <nav id="nav-bar">
      <ul>
        <li>
          <a href="#features" class="nav-link">Features</a>
        </li>
        <li>
          <a href="#HowWorks" class="nav-link">How It Works</a>
        </li>
        <li>
          <a href="#flexbox" class="nav-link">Flex Boxes</a>
        </li>
      </ul>
    </nav>
  </header>
</div>

Answer 1

Добавьте к #header

#header {
    position: fixed;
    left: 0; 
    right: 0;
}

или

#header {
    position: fixed;
    width: 100%;
}

БЛОГ НА HUSL

Как применить position: fixed для flexbox'a

Ответы (1 шт):