title: display flex in body
body: <p>Here is my code and i have some problems cause main goes under header and in my opionion it should not :) And i have no idea why main goes under headers instead of ony by one in column? And i have no idea how to fix this? I wann make flexbox SPA.</p>
  
  <p>Can anyone help please see what im doing wrong? Cause i was trying to solve it by myself but couldnt make it.</p>
  
  <p>Best
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  
  body {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
  }
  
  
  .main-header {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      background: #0dfd8d;
      align-items: center;
      justify-content: space-around;
      flex-flow: row wrap;
  }
  
  .main-header__logo {
      text-decoration: none;
  }
  
  .main-header__logo img {
      height: 7rem;
      vertical-align: middle;
  }
  
  .main-header__items {
      list-style: none;
      margin: 0;
      display: flex;
      justify-content: flex-end;
  }
  
  .main-header__item {
      margin: 1rem;
  }
  
  .main-header__item a {
      text-decoration: none;
      color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="main-header"&gt;
          &lt;div class="main-header__logo"&gt;
             &lt;a href="#"&gt;&lt;img src="logo.png" alt="logo"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;nav class="main-header__nav"&gt;
              &lt;ul class="main-header__items"&gt;
                  &lt;li class="main-header__item"&gt;&lt;a href="#omnie"&gt;O Mnie&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="main-header__item"&gt;&lt;a href="#przyklady"&gt;Przykładowe Teksty&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="main-header__item"&gt;&lt;a href="#kontakt"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;div id="omnie"&gt;
              &lt;img src="eagle.jpg" alt=""&gt;
              &lt;p&gt;Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                  zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="przyklady"&gt;Przykładowy artykuł&lt;/div&gt;
          &lt;div id="Kontakt"&gt;
              &lt;form class="form"&gt;
                  &lt;label for="name"&gt;Imie&lt;/label&gt;
                  &lt;input id="name" type="text" placeholder="Podaj Imie"&gt;
                  &lt;label for="surname"&gt;Nazwisko&lt;/label&gt;
                  &lt;input id="surname" type="text" placeholder="Podaj Nazwisko"&gt;
                  &lt;label for="email"&gt;Email&lt;/label&gt;
                  &lt;input id="email" type="email" placeholder="Podaj Email"&gt;
                  &lt;label for="message"&gt;Wiadomość&lt;/label&gt;
                  &lt;textarea rows="6" id="message" placeholder="Podaj Wiadomość"&gt;&lt;/textarea&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/main&gt;
      &lt;footer&gt;
  
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>