title: How to align this logo at the top of the page using flexbox?
body: <p><a href="https://i.stack.imgur.com/zMj0v.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zMj0v.jpg" alt="enter image description here"></a></p>
  
  <p>Hi,
  I want the logo 'Abyk Deco' to stay at the top of the page, but it's now centered along with the two heading text. How can I align this at the top using flexbox? I've tried this code.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="banner"&gt;
      &lt;div class="logo"&gt;
          &lt;h1&gt;&lt;a href="#"&gt;Abyk&lt;span id="red"&gt;Deco&lt;span&gt;&lt;/a&gt;&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="heading"&gt;
          &lt;h1&gt;ABYK DECO&lt;/h1&gt;
          &lt;h4&gt;We make your dream home come true!&lt;/h4&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS:</p>
  
  <pre><code>    .banner{
      height: 100%;
      background-image: url(../img/1.jpeg);
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      background-attachment: fixed;
      display: flex;  
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }  
  
  .logo{
      color: #fff;
      font-size: 2em;
      font-family: 'Oswald', sans-serif;
      align-items: flex-start;
      justify-content: center;
  }   
  
  .logo a{
      color: #fff;
  }
  
  #red{
      color: red;
  }
  
  .heading{
      font-family: 'PT Sans', sans-serif;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  .heading h1{
      font-size: 4.5em;
  }
  
  .heading h4{
      font-size: 2em;
  }
  </code></pre>
  
  <p>How can I align the logo to the top while the heading texts stay at the center? I prefer to use flexbox to solve this problem. Thank You.</p>