title: How to move line of text below another?
body: <p>I am having trouble moving one line of text below another. I have a feeling its something to do with the flexbox vertical align. I have also tried using <code>display: block</code> but to no avail. Please help, thank you.</p>
  
  <p>The problem is the first section here:
  <a href="https://jsfiddle.net/sqeeux47/" rel="nofollow">https://jsfiddle.net/sqeeux47/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section id="section1"&gt;
      &lt;h1 id="section1heading"&gt;Welcome to our multicultural society.&lt;/h1&gt;
      &lt;h4 id="section1paragraph"&gt;Come worship with us.&lt;/h4&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#section1 {
      background-image: url(" http://i300.photobucket.com/...");
      background-repeat:no-repeat;
      background-size:100%;
      background-position:center;
      width:100%;
      height:606px;
      text-align:center;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  </code></pre>