diff --git a/packages/asc-web-common/components/Article/styled-article.js b/packages/asc-web-common/components/Article/styled-article.js
index a90448c4b6..3413294d62 100644
--- a/packages/asc-web-common/components/Article/styled-article.js
+++ b/packages/asc-web-common/components/Article/styled-article.js
@@ -28,20 +28,20 @@ const StyledArticle = styled.article`
 
   box-sizing: border-box;
 
-  padding: 0 20px;
+  //padding: 0 20px;
 
   @media ${tablet} {
     min-width: ${(props) => (props.showText ? "243px" : "60px")};
     max-width: ${(props) => (props.showText ? "243px" : "60px")};
 
-    padding: 0 8px;
+    //padding: 0 8px;
   }
 
   ${isMobile &&
   css`
     min-width: ${(props) => (props.showText ? "243px" : "60px")};
     max-width: ${(props) => (props.showText ? "243px" : "60px")};
-    padding: 0 8px;
+    //padding: 0 8px;
   `}
 
   @media ${mobile} {
@@ -55,7 +55,7 @@ const StyledArticle = styled.article`
     height: calc(100% - 64px) !important;
 
     margin-top: 16px;
-    padding: 0 8px;
+    //padding: 0 8px;
   }
 
   ${isMobileOnly &&
@@ -66,8 +66,6 @@ const StyledArticle = styled.article`
     min-width: 100% !important;
     width: 100%;
     position: fixed;
-    margin: 0;
-
     margin: 0;
     padding: 0;
     margin-top: ${(props) =>
@@ -83,12 +81,18 @@ const StyledArticle = styled.article`
       overflow-x: hidden !important;
       height: calc(100% - 200px);
       ${!isDesktop && "padding-top:  16px"};
-      padding-right: 0px !important;
+      padding: 0 20px;
 
       @media ${tablet} {
         height: calc(100% - 150px);
+        padding: 0 8px !important;
       }
 
+      ${isTablet &&
+      css`
+        padding: 0 8px !important;
+      `}
+
       @media ${mobile} {
         height: calc(100% - 20px) !important;
         padding-bottom: 20px;
@@ -106,14 +110,14 @@ const StyledArticle = styled.article`
 StyledArticle.defaultProps = { theme: Base };
 
 const StyledArticleHeader = styled.div`
-  padding: 16px 0 17px;
+  padding: 16px 20px 17px;
   margin-left: -1px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
 
   @media ${tablet} {
-    padding: 18px 0 19px;
+    padding: 18px 8px 19px;
     margin: 0;
     justify-content: ${(props) => (props.showText ? "flex-start" : "center")};
 
@@ -125,7 +129,7 @@ const StyledArticleHeader = styled.div`
 
   ${isTablet &&
   css`
-    padding: 18px 0 19px;
+    padding: 18px 8px 19px;
     margin: 0;
     justify-content: ${(props) => (props.showText ? "flex-start" : "center")};
 
@@ -141,13 +145,6 @@ const StyledArticleHeader = styled.div`
     // margin-bottom: 16px !important;
   }
 
-  ${isTablet &&
-  css`
-    padding: 16px 0 17px;
-    justify-content: ${(props) => (props.showText ? "flex-start" : "center")};
-    margin: 0;
-  `}
-
   ${isMobileOnly &&
   css`
     border-bottom: ${(props) =>
@@ -226,7 +223,7 @@ const StyledMenuIcon = styled(MenuIcon)`
 StyledMenuIcon.defaultProps = { theme: Base };
 
 const StyledArticleMainButton = styled.div`
-  padding: 0px 0 16px;
+  padding: 0px 20px 16px;
   max-width: 100%;
 
   @media ${tablet} {