title: text under header with Html and Css
body: <p>I have the following code, which displays a header with in each page of my website:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: burlywood;
    color: beige;
    border-style: groove;
  }
  #register {
    display: flex;
    flex-direction: column;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;title&gt;About HatSpace&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/about_style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="header"&gt;
      &lt;div&gt;
        &lt;h1&gt;HatSpace&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="register"&gt;
        &lt;form&gt;
          &lt;input style="width: 500px;" type="text" placeholder="Search the Website"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;p&gt;Log in&lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;p&gt;Sign in&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, how can I add these three texts right beneath it, so that they will be included in the header div too. I've tried various ways, but it rearranges my header...I just want easier navigation for the user, so that when they click home, they go back home no matter which page they are since it's always part of the header.
  Thanks</p>
  
  <p><a href="https://i.stack.imgur.com/Mklkd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mklkd.jpg" alt="enter image description here"></a></p>