title: Elements floating over each other even though they're blocks?
body: <p>So front-end design isn't really my forte...</p>
  
  <p>I'm attempting to have every post/my main header/logo take up 100% by 100% which works. But I'm also trying to have certain elements positioned within the parent element, also which I have done, but when the site gets resized down the elements tend to just float over on top of one another.</p>
  
  <p>Is there a way I can go about making it so each element acts as a block to prevent the float?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
    font-family: 'Raleway', sans-serif;
   }
  
   /* Article/Content */
   div.article {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
   }
   div.article p {
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
   }
   div.article div.datetime {
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-block;
   }
   .hookers {
    vertical-align: middle;
       font-size: 700%;
       color:#CFD8DC;
       letter-spacing: -2px;
       font-weight: bold;
       text-shadow: 1px 1px #78909C,2px 2px #78909C,3px 3px #78909C,4px 4px #78909C,5px 5px #78909C,6px 6px #78909C,7px 7px #78909C,8px 8px #78909C,9px 9px #78909C,10px 10px #78909C;
   }
  
   /* Misc */
   .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href='https://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
  &lt;div class="header article"&gt;
   &lt;span class="hookers noselect"&gt;WELCOME&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="article"&gt;
    &lt;div class="datetime"&gt;Posted on &lt;?= date('Y-m-d'); ?&gt; at &lt;?= time(); ?&gt;&lt;/div&gt;
    &lt;p&gt;The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>