Fonts not aligning to centre or formatting correctly on mobile

Site URL: https://www.mumfolk.com

I'm having trouble formatting fonts on mobile. 

Couple of issues:

1. The fonts aren't displaying correctly when I view the site on my mobile phone (iphone 7) although they look differently when you look on mobile view on desktop

2. I would like to centrally align the text and buttons (standard buttons and buttons for forms)  on mobile but it's not seeming to work

I have 9 font styles in the CSS, not sure if that's causing a problem! Here is the code I have

@media only screen and (max-width: 640px) {
body {font-family: "aktiv grotesk", sans-serif; font-size: 14pt;
line-height: 25px; text-align: centre !important!;}
h1 {font-size: 35pt; line-height: 55px; text-align: centre;}
h2 {font-family: "Bely", serif;
font-size: 25pt; line-height: 38px;}
h3 {font-family: 'aktiv grotesk', sans-serif;
font-weight: 600; font-size: 12pt; line-height: 22px;}
h4 {font-family: 'Bely Display', serif; font-weight: 700;
font-size: 25px; letter-spacing: 0.03em; text-transform: none;
line-height: 1.3em; color:(#E7B1F2); text-align: centre !important!;}
h5 strong { font-family: 'Bely Display', serif; font-weight: 700;
font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase;
line-height: 2.2em; color:(#000000); text-align: centre !important!;}
h6 {font-family: 'aktiv grotesk', sans-serif;
font-weight: 500; font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; line-height: 2.5em;
color:(#000000); text-align: centre;}
h7 italic {font-size: 21pt; text-align: center !important!;}
}

Any suggestions would be very welcome! Thank you
 

1. Which elements?

2. Which button? Can you take screenshot or share link to page?

I'm trying to align all text on mobile to align centrally as well as all buttons - have screenshot the homepage on mobile view which shows text isn't aligning as I've inputed in the code.

Also side note - some body copy text is appearing in bold and I have no idea why!!

Thanks so much in advance to any help 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Hey alen */
section#new-page-59 * {
    text-align: center;
}
/* want to know */
section#new-page-43 * {
    text-align: center;
}
}

bold text. Which text? You mean text under hey i'm helen?

36 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Hey alen */
section#new-page-59 * {
    text-align: center;
}
/* want to know */
section#new-page-43 * {
    text-align: center;
}
}

bold text. Which text? You mean text under hey i'm helen?

Hey thanks so much - yes the text under 'hey I'm Helen' is showing up bold for some reason, but not in the preview when formatting in the backend?

Also realised I'd added an extra ! at the end of '!important' so removing this has aligned the text to the centre on mobile!