Align Titles

src/assets/css/palmpay.css

@@ -360,8 +360,28 @@ ul.social-buttons {
 }
 .ambassadorsTitle {
   margin-top: 0 !important;
+  margin-left: -97px;
 }
 .about.bg-secondary > div {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
+.ambassadorsTitle {
+  margin-top: 0 !important;
+}
+
+@media screen and (min-width: 328px) {
+  .ambassadorsTitle {
+    margin-left: -97px;
+  }
+  .marketingMargin {
+    margin-left: -147px !important;
+  }
+  .merchantsMargin {
+    margin-left: -150px !important;
+  }
+}
+
+th {
+  text-align: left !important;
+}

src/components/pages/MarketingPage.js

@@ -6,6 +6,12 @@ import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import AppHeader from '../AppHeader';
 import Footer from '../Footer';
 
+const centerStyle = {
+  textAlign: 'center',
+  marginTop: 20,
+  marginBottom: 20
+};
+
 /**
  * Marketing page component.
  */
@@ -109,6 +115,7 @@ class MarketingPage extends React.Component {
       <div className="containerfix">
       <div className="row">
       <div className="col-md-10 mx-md-auto">
+        <h2 className="ambassadorsTitle marketingMargin" style={centerStyle}>Marketing</h2>
       <div>
       <div>
       <Button

src/components/pages/MerchantsPage.js

@@ -259,7 +259,7 @@ class MerchantsPage extends Component {
       <div className="row">
       <div className="col-md-10 mx-md-auto">
 
-        <h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
+        <h2 className="ambassadorsTitle merchantsMargin" style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
         { /* Conditional Rendering */}
             {(this.state.loading) ? (
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />