improved layout

css/midterm.css

@@ -111,22 +111,39 @@ body {
 
 header {
   background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 ul, ol {
   text-align: left;
   margin-left: 100px;
 }
 
+.copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
 .particle-wrapper {
-  position: relative;
   height: 400px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto 1fr;
+}
+
+.particle-wrapper p {
+  grid-row: 2/3;
+  grid-column: 1/2;
 }
 
 .particle-container {
   overflow: hidden;
   height: 100%;
-  position: absolute;
+  grid-row: 1/4; 
+  grid-column: 1/2;
 }
 
 .particle-temp {

midterm.html

@@ -48,7 +48,7 @@ <h1>Particle Animation</h1>
   <p>Or you can make your particles show-stopping!</p>
 </div>
 
-<div id="info1">
+<div class="copy" id="info1">
   <p>Particles are the key to all of the realistic animation effects below. 
     Check them out!</p>
   <ul>
@@ -78,7 +78,7 @@ <h1>Particle Animation</h1>
   </div>
 </div>
 
-<div id="info2">
+<div class="copy" id="info2">
   <p>Say you’re already familiar with the animation properties of CSS.
     What makes particle animation any different?</p>
   <p>The defining characteristics of a particle animation are: </p>
@@ -95,7 +95,7 @@ <h1>Particle Animation</h1>
   <p>We'll look at some ways to get past these limitations later on.</p>
 </div>
 
-<div id="info3">
+<div class="copy" id="info3">
   <h2>Tutorial</h2>
   <p>Read on to find out how you can create awesome CSS particle animations yourself!</p>
   <h3>Outline</h3>