@media queries not working as expected

I am trying to center p tags until the screen reaches a minimum of 768px, then left-align the p tags from 768px and up. I am doing to exact same thing for my h1, h2 tags but instead of left-aligning at 768px, I set it to left-align at 992px.

My p tag is not centering below 768px and below. My h1 and h3 tags are only centering between 768px and 992px. Once I hit 767px and below everything left aligns when it should center. CSS below. What am I doing wrong?

/*======= about ========*/
#about p {
  text-align: center;
  padding-bottom: 15px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
  #about p {
  text-align: left;
  }
}

#about h3 {
  margin-top: -5px; 
}

#about .team h1 {
  font-weight: bold;
}

#about h1, h3 {
  text-align: center;
}

/* Medium devices (medium devices, 992px and up) */
@media (min-width: 992px) {  
  #about h1, h3 {
    text-align: left;
  }
}

#about img {
  margin: 0 auto;
}

Here is the html:

<div id="about">
<div class="container">
  <div class="row">
    <p></p>
    <p></p>
    <p></p>
  </div> <!-- end row -->

  <div class="row">
    <div class="col-md-4 team">
      <h1>Meet The Team</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <a href="bios/#.html"><img src="img/team/580x410.jpg" class="img-    responsive" alt=""></a>
      <h1></h1>
      <h3 class="text-muted">Chairman &amp; CEO<br> 
                  Senior Wealth Advisor</h3>
    </div>
    <div class="col-md-4">
      <a href="bios/"><img src="img/team/580x410.jpg" class="img-responsive"     alt=""></a>
      <h1></h1>
      <h3 class="text-muted">President<br>
      Senior Wealth Advisor</h3>
    </div>
    <div class="col-md-4">
      <a href="bios/.html"><img src="img/team/580x410.jpg" class="img-    responsive" alt=""></a>
      <h1></h1>
      <h3 class="text-muted">Chief Operating Officer</h3>
    </div>
  </div> <!-- end row -->
</div> <!-- end container -->

Solution

You should put media queries at a mathematical order, first the ones with the greater number and then the ones with the lower. And it is a good practice to have them at the bottom of your css file.
Furthermore, you should check Inspect element and check closely how the rules change when you minimize your screen. Maybe the rules apply and they are overwritten, so you have to use !important or they never apply, so you miss a bracket or something else.