diff --git a/src/components/Pricing/PlanCard/planCard.style.js b/src/components/Pricing/PlanCard/planCard.style.js
index d2355e90b3043..13af857b75cdd 100644
--- a/src/components/Pricing/PlanCard/planCard.style.js
+++ b/src/components/Pricing/PlanCard/planCard.style.js
@@ -85,7 +85,7 @@ const PlanCardWrapper = styled.section`
       font-size: 0.75rem;
       font-weight: 500;
       top: 0rem;
-      right: .9rem;
+      right: .0rem;
       color: #eee;
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
@@ -98,7 +98,7 @@ const PlanCardWrapper = styled.section`
       font-size: 0.75rem;
       font-weight: 500;
       top: 0rem;
-      right: .9rem;
+      right: .0rem;
       color: #111;
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
diff --git a/src/reusecore/Layout/Col.js b/src/reusecore/Layout/Col.js
index 93ca131cc4b4a..3ffebb99e9480 100644
--- a/src/reusecore/Layout/Col.js
+++ b/src/reusecore/Layout/Col.js
@@ -4,11 +4,28 @@ import styled from "styled-components";
 const Dimensions = ["", "8.333333%", "16.666667%", "25%", "33.333333%", "41.666667%", "50%", "58.333333%", "66.666667%", "75%", "83.333333%", "91.666667%", "100%"];
 
 const ColWrapper = styled.div`
+
     position: relative;
     width: 100%;
     padding-left: 15px;
     padding-right: 15px;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0; 
+
+    flex: 0 1 300px; 
+    max-width: 300px;
+    width: 100%;
 
+    @media (max-width: 1200px) {
+    flex: 0 1 45%;
+    max-width: 45%;
+    }
+    @media (max-width: 768px) {
+    flex: 0 1 100%;
+    max-width: 100%;
+    }
     @media (min-width: 315px) {
         flex: ${({ $xs }) =>
   ($xs === 1 && `0 0 ${Dimensions[1]}`) ||
diff --git a/src/reusecore/Layout/Container.js b/src/reusecore/Layout/Container.js
index b1e5c9136af06..12ec707f75406 100644
--- a/src/reusecore/Layout/Container.js
+++ b/src/reusecore/Layout/Container.js
@@ -3,9 +3,9 @@ import styled, { css } from "styled-components";
 
 const ContainerWrapper = styled.div`
 
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
+    // width: 100%;
+    // padding-right: 15px;
+    // padding-left: 15px;
     margin: 0 auto;
     @media (min-width: 576px) {
         max-width: 100%;
@@ -17,7 +17,7 @@ const ContainerWrapper = styled.div`
         max-width: 960px; 
     }
     @media (min-width: 1200px) {
-        max-width: 1170px; 
+        max-width: 1324px; 
     }
 
     ${props => props.fluid && css`
diff --git a/src/reusecore/Layout/Row.js b/src/reusecore/Layout/Row.js
index 4f5bc953fb1c3..814ec1503e760 100644
--- a/src/reusecore/Layout/Row.js
+++ b/src/reusecore/Layout/Row.js
@@ -3,11 +3,10 @@ import styled, { css } from "styled-components";
 
 const RowWrapper = styled.div`
   display: flex;
-  margin-left: -15px;
-  margin-right: -15px;
-  @media (max-width: 760px) {
-    flex-wrap: wrap;
-  }
+  flex-wrap: wrap;
+  gap: 30px;
+  margin-left: 0;
+  margin-right: 0;
   ${(props) =>
   props.$Vcenter &&
     css({