CSS for left-justification of text on mobile

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

Hello!

I'm looking for some help troubleshooting getting a custom code block to left-justify on mobile. \

Here's the custom HTML block & the relevant CSS code I'm using. 

When I look at my site on my phone, it still stays center justified.

Thanks for your help!

<h3><center>YOUR TIME IS LIMITED.<br>
BE THOUGHTFUL ABOUT HOW YOU SPEND IT.</center></h3>
<p><center>Let Dancing Chihuahua work with your team to scope out a custom project.</center></p>

@media screen and (max-width: 640px) { 
  h1 {
     font-size: 60px;
    }
    h3{
       text-align: left;   
    }
    p{
       text-align: left;   
    }
    }

edit

h3 >>> h3 center

p >>>> p center

Thanks so much for your help. I was able to get the h3 text to left justify, but the p text is staying centered on mobile still. 

Here's the updated CSS code for your reference:

p, h1, h2, h3, h4, h5 {
  -webkit-hyphens: manual !important;
     -moz-hyphens: manual !important;
      -ms-hyphens: manual !important;
          hyphens: manual !important;
}
h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1.8em;
    padding-top: 40px;
}
h7 {
   color: rgb(255,255,255);
  font-family: alice, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8em;
 text-align: left;   
}

h5 {
  color: hsl(7, 70%, 64%);
  font-family: Sofia Pro;
  font-weight: 800;
  font-size: 30px;
}
@media screen and (max-width: 640px) { 
  h1 {
     font-size: 50px;
    }
  h3 center{
       text-align: left;   
    }
    p center{
       text-align: left;   
    }
  h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
    padding-top: 60px;
}
    }

    
@media screen and (max-width:640px) {
div#block-yui_3_17_2_6_1508176087646_68928 * {
   text-align: left !important;
}

}

#block-yui_3_17_2_1_1571367142595_5719 { 
max-width: 100px !important;
    text-align: center
}

I really appreciate you making time to assist!

try adding !important

eg: text-align: left !important;

I appreciate the continued help. Just tried that and am still getting the <p> as centered on mobile. 

p, h1, h2, h3, h4, h5 {
  -webkit-hyphens: manual !important;
     -moz-hyphens: manual !important;
      -ms-hyphens: manual !important;
          hyphens: manual !important;
}
h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1.8em;
    padding-top: 40px;
}
h7 {
   color: rgb(255,255,255);
  font-family: alice, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8em;
 text-align: left;   
}

h5 {
  color: hsl(7, 70%, 64%);
  font-family: Sofia Pro;
  font-weight: 800;
  font-size: 30px;
}
@media screen and (max-width: 640px) { 
  h1 {
     font-size: 50px;
    }
  h3 center{
       text-align: left !important; 
    }
    p center{
       text-align: left !important; 
    }
  h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
    padding-top: 60px;
}
    }

    
@media screen and (max-width:640px) {
div#block-yui_3_17_2_6_1508176087646_68928 * {
   text-align: left !important;
}

}

#block-yui_3_17_2_1_1571367142595_5719 { 
max-width: 100px !important;
    text-align: center
}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1585863762234_7141 * {
    text-align: left;
}
}

also, html tag has no h7

Nice, yea that did it. Thank you for your help. I really appreciate it.