Some initial change need to make for re-viewing

Author: Jacknguyen4438

Wireframe/index.html

@@ -14,7 +14,7 @@ <h1>Wireframe Basic knowledge</h1>
       </p>
     </header>
     <hr>
-    <main>
+    <main id="main-div">
     <div id="div-1">
        <article class="article-border">
           <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="An image with the work Read ME with green color" id="image-size" />
@@ -31,6 +31,7 @@ <h2>READ ME.md file and what is purpose.</h2>
 
         <!--The second Item-->
         <div id="row-side">
+          
         <div  class="content-size">
         <article class="article-border">
           <img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Is an example of how to design web layout" class="image-size-2" />

Wireframe/style.css

@@ -51,24 +51,25 @@ article{
     background-color: white;
 }
 
+#main-div {
+    display: flex;
+    flex-direction: column;
+    width: '100%';
+    align-items: center;
+}
+
 /*This is for the position of the first Item*/
 #div-1{
    width: 58%;
    height: 20%;
-   position: relative;
-   left:19%;
-   overflow: hidden;
-   margin-bottom: 20px;
+   display: flex;
 }
 
 /*This part is mainly for item 2 and 3*/
 
 #row-side{
-   width:73%;
    display: flex;
-   position: relative;
-   left: 19%;
-   padding: 0px 0px 0px -10px;
+   justify-content: center;
 }
 
 .content-size{