Bootstrap grid is ok on local, but broken on server

Question

Working on my first project with Bootstrap (and CSS in general).

In the following section, the columns look great on local for xs screen sizes, but on the server, the entire section is squashed over to the right. Can't seem to figure out what's wrong.

  <div class="container testimonials">
  <h2>What People Are Saying</h2>

  <div class="row">

  <div class="col-md-1 col-xs-0">
  </div>

  <div class="col-md-5 col-xs-6">
  <div class="quotes">
    <blockquote>Extremely helpful! How to Interview is an easy read that hits all the major concerns about interviewing - and how to handle them appropriately. I recommend it to anyone who is trying to land a job.</blockquote>
  </div>
  </div>

  <div class="col-md-5 col-xs-6">
  <div class="quotes">
    <blockquote>I interviewed at Google twice and didn't made the cut. I interviewed a third time -- trying the techniques in How to Interview -- and got the job. It changed the way I communicate and helped me get the job I wanted.</blockquote>
  </div>
  </div>

  <div class="col-md-1 col-xs-0">
  </div>

  </div> <!-- /row -->
  </div> <!-- /testimonials -->

Answer 1

The problem is excessive padding on the testimonials class:

.testimonials {
    /* ... */
    padding-left: 190px;
    padding-right: 190px;
}

It's not leaving enough room for the content.

Since those rules are coming from a separate CSS file main.css perhaps that file is different on your local server.