diff --git a/src/layouts/page/products.html b/src/layouts/page/products.html
index b5a71f9..bc5a80f 100644
--- a/src/layouts/page/products.html
+++ b/src/layouts/page/products.html
@@ -4,7 +4,7 @@
 <div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-1"></div>
 <div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-2"></div>
 <div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-3"></div>
-  <div class="container">
+  <div class="container product-container">
     <div class="row">
       <div class="col">
         <h1>Products</h1>
@@ -19,7 +19,7 @@
 <hr>
 
 <section class="products-tea-cli">
-  <div class="container">
+  <div class="container product-container">
     <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
         <h3>tea cli</h3>
@@ -36,7 +36,7 @@
 <hr>
 
 <section class="products-tea-package-manager">
-  <div class="container">
+  <div class="container product-container">
     <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-12 order-lg-2 my-auto">
         <h3>tea protocol</h3>
@@ -53,7 +53,7 @@
 <hr>
 
 <section class="products-tea-protocol">
-  <div class="container">
+  <div class="container product-container">
     <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
         <h3>package manager</h3>
diff --git a/src/static/css/products.css b/src/static/css/products.css
index 05b229f..bbaa3b3 100644
--- a/src/static/css/products.css
+++ b/src/static/css/products.css
@@ -35,6 +35,10 @@
 
 @media only screen and (max-width: 576px) {
 
+  .product-container{
+    padding: 7vw !important;
+  }
+
 }
 
 /* Generative Art styling */
diff --git a/src/static/css/typography.css b/src/static/css/typography.css
index d9f7250..10362b6 100644
--- a/src/static/css/typography.css
+++ b/src/static/css/typography.css
@@ -11,7 +11,7 @@
 }
 
 h1,h2,h3,h4,h5,h6,p,.lead{
-  hyphens: auto;
+  hyphens: auto !important;
 }
 
 h1{