diff --git a/assets/css/hero.css b/assets/css/hero.css
index f26946e..6d3143a 100644
--- a/assets/css/hero.css
+++ b/assets/css/hero.css
@@ -1,9 +1,15 @@
 /* Base styles for the hero section */
 .hero {
+  position: relative;
+  width: 100%;
+  margin: 0 auto; /* Centering the hero section */
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  padding: 2rem;
+  padding-top: 80px;
+  padding-bottom: 80px;
+  padding-left: 40px;
+  padding-right: 40px;
   background: linear-gradient(to bottom right, #F9B208, #E72E77);
 }
 
@@ -71,25 +77,11 @@
 }
 
 /* Responsive layout for larger screens */
-@media screen and (min-width: 768px) {
-  .hero {
-    position: relative;
-    width: 100%;
-    margin: 0 auto; /* Centering the hero section */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-top: 80px;
-    padding-bottom: 80px;
-    padding-left: 40px;
-    padding-right: 40px;
-    background: linear-gradient(to bottom right, #F9B208, #E72E77);
-  }
-  
+@media screen and (min-width: 768px) {  
   .hero-inner {
-    display: flex;
     justify-content: space-between;
     width: 100%;
+    flex-direction: row;
   }
   
   .hero-content {
@@ -127,7 +119,7 @@
   }
   
   .screenshot {
-    width: 100%;
+    width: auto;
     height: 330px;
     background-color: white;
     border: 5px solid black;