При фиксированном позиционировании весь контент блока перемешивается

Question

Хочу сделать фиксированную шапку, но когда ставлю position fixed ссылки перемещаются под логотип

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    color: black;
}

body {
    font-family: sans-serif;
    font-size: 20px;
    padding: 20px;
    color: gray;
    background: #d5d6d0;
    height: 100%;
}

#container {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

#header {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#nav-bar {
    display: flex;
    justify-content: space-evenly;
    width: 40%;
    flex-wrap: wrap;
}

a {
    text-decoration: none;
    color: inherit;
}

<header id="header">
  <img src="img/product-landing-page-logo.png" alt="" width="400">
  <nav id="nav-bar">
    <a href="#features">Features</a>
    <a href="#guide">How It Works</a>
    <a href="#pricing">Pricing</a>
  </nav>
</header>

Answer 1

У вас не задана ширина для header

#header {
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}

БЛОГ НА HUSL

При фиксированном позиционировании весь контент блока перемешивается

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