centered text div dynamically and added img to doc

Author: Koregano73

src/assets/snaptogrid.jpg

@@ -7,14 +7,14 @@
 <template>
   <!-- the background Canvas grid -->
   <div class="component-display grid-bg" :style="{backgroundColor:'#FFFFF' }" v-on:click="handleClick" v-on:click.right="handleRight">
-  <div class="cssContainer" :style="{ 
-    'background-size': `${gridWidth}px ${gridHeight}px, 
-    ${gridWidth}px ${gridHeight}px`, 
-    'height': `${this.containerH}px`, 'width': `${this.containerW}px` 
+    <div class="cssContainer" :style="{ 
+      'background-size': `${gridWidth}px ${gridHeight}px, 
+      ${gridWidth}px ${gridHeight}px`, 
+      'height': `${this.containerH}px`, 'width': `${this.containerW}px` 
     }">
+    <p class="cssContainerText"> {{this.activeRoute}} Preview </p>
     <!-- This is the actual component box -->
     <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
-    <p class="cssContainerText"> {{this.activeRoute}} Preview </p>
     <!--each component box in canvas will have these properties-->
     <vue-draggable-resizable
       class-name="component-box"
@@ -880,10 +880,11 @@ behavior: url(/pie/PIE.htc);
 }
 
 .cssContainerText {
-  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-content: center;
   font-size: 3em;
   margin-top: -4%;
-  margin-left: 29%;
   color: black;
 }
 

src/components/Canvas.vue

@@ -3,8 +3,9 @@
     <h6 class="infoHeading">What's New in OverVue 8.0?</h6>
 
     <p class="info-sub-heading">Improved Prototyping with Snap to Grid Positioning</p>
-    <p class="infoContent">Level up your prototyping with snap to grid positioning and component sizing that is exported as CSS grid styling in exported SFC's. Overvue 8.0 also fixes bugs that led to conditional application of color and position styling in previous versions. </p>
-
+    
+    <p class="infoContent">Level up your prototyping with snap to grid positioning and component sizing that is exported as CSS grid styling in exported SFC's. Overvue 8.0 also fixes bugs that led to conditional application of color and position styling in previous versions. Click on these buttons below and a menu pull down show appear to change the grid density for either the width or height. </p>
+    <img src="../../../assets/snaptogrid.jpg" class="tut-image"> 
     <p class="info-sub-heading">Augmented Component Creation with Element+ Component Library</p>
     <p class="infoContent">Take advantage of the popular, Vue 3.0 compatible component library, Element+. Manipulate these components in app, and rest easy knowing exported code includes both the library elements, and their necessary dependencies.</p>
 
@@ -85,7 +86,7 @@ export default {
 .tut-screenshot {
   margin: 4px;
   border: 1px solid $primary;
-  max-width: 300px;
+  max-width: 200px;
 }
 
 #advanced-btn {