Align Titles - logo

src/assets/css/palmpay.css

@@ -360,7 +360,6 @@ ul.social-buttons {
 }
 .ambassadorsTitle {
   margin-top: 0 !important;
-  margin-left: -97px;
 }
 .about.bg-secondary > div {
   padding-left: 0 !important;
@@ -372,16 +371,29 @@ ul.social-buttons {
 
 @media screen and (min-width: 328px) {
   .ambassadorsTitle {
-    margin-left: -97px;
+    font-weight: bold;
   }
   .marketingMargin {
-    margin-left: -147px !important;
+    font-weight: bold;
   }
   .merchantsMargin {
-    margin-left: -150px !important;
+    font-weight: bold;
   }
 }
 
 th {
   text-align: left !important;
 }
+
+#mainNav p {
+  margin-left: 0 !important;
+
+}
+
+header .col-md-10, header .col-md-10 > div {
+  padding-left: 0 !important;
+}
+
+.search-books-input-wrapper > div {
+  margin-left: 0 !important;
+}

src/components/AppHeader.js

@@ -14,13 +14,15 @@ import AppLogo from '../assets/img/header/logo.png';
 function AppHeader() {
   return (
     <AppBar position="static" color="inherit" style={{backgroundColor: '#138F52'}}>
+  <div className="col-md-10 mx-md-auto" >
       <Toolbar>
-        <Typography style={{margin: '0 auto'}} variant="title" color="inherit">
+        <Typography variant="title" color="inherit">
           <Link to="/">
             <img src={AppLogo} className="app-book-menu-remove-icon" alt="Palmpay logo" />
           </Link>
         </Typography>
       </Toolbar>
+    </div>
     </AppBar>
   );
 }

src/components/pages/AmbassadorsPage.js

@@ -24,7 +24,6 @@ import LoadingGif from '../../assets/img/loading_icon.gif';
 const countries = Countries();
 
 const centerStyle = {
-  textAlign: 'center',
   marginTop: 20,
   marginBottom: 20
 };
@@ -313,7 +312,7 @@ class AmbassadorsPage extends Component {
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
         ): (
           <div>
-            <p style={{ textAlign: 'left', marginLeft: 20, marginRight: 20 }}>
+            <p style={{ textAlign: 'left', marginRight: 20 }}>
               <FormattedHTMLMessage id="ambassadors.description1" />
               <Link to="/merchants">
                 <FormattedMessage id="ambassadors.merchants_link_description" />

src/components/pages/MarketingPage.js

@@ -7,7 +7,6 @@ import AppHeader from '../AppHeader';
 import Footer from '../Footer';
 
 const centerStyle = {
-  textAlign: 'center',
   marginTop: 20,
   marginBottom: 20
 };

src/components/pages/MerchantsPage.js

@@ -25,7 +25,6 @@ import "./MerchantsPage.css";
 const countries = Countries();
 
 const centerStyle = {
-  textAlign: 'center',
   marginTop: 20,
   marginBottom: 20
 };
@@ -265,7 +264,7 @@ class MerchantsPage extends Component {
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
         ): (
           <div>
-            <p style={{ textAlign: 'left', marginLeft: 20, marginRight: 20 }}>
+            <p style={{ textAlign: 'left', marginRight: 20 }}>
               <FormattedHTMLMessage id="merchants.description1" />
               <Link to="/ambs">
                 <FormattedMessage id="merchants.ambassadors_link_description" />