title: bootstrap grid in widescreen mode has incorrect div offset
body: <p>I am working on bootstrap code that looks correct on a mobile device but the medieval music div is oddly placed and the pedagogy div is too far down.  They should make a 2x2 grid.  Can anyone spot why this is happening?</p>
  
  <pre><code>        &lt;div class="view-container"&gt;
            &lt;!-- ngView:  --&gt;&lt;div data-ng-view="" class="view-frame ng-scope"&gt;&lt;!-- ngInclude:  --&gt;&lt;div data-ng-include="" src="'partials/navbar_sub.html'" class="ng-scope"&gt;&lt;!-- ugh...code dup...need the bootstrap attribute in navbar for mainpage --&gt;
  &lt;!-- and no scrollspy otherwise --&gt;
  &lt;!-- merge this with other navbar, as otherwise they are the same --&gt;
  &lt;!-- Navigation --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top navbar-shrink ng-scope"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#page-top"&gt;The LilyPond Consortium&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="hidden"&gt;
                      &lt;a href="#page-top"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="hidden"&gt;
                      &lt;a href="#mission"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#services"&gt;Services&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#members"&gt;Members&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#projects"&gt;Projects&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#donations"&gt;Donations&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="hidden"&gt;
                      &lt;a href="#more"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="hidden"&gt;
                      &lt;a href="#contact"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#login"&gt;Log in&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div ui-view="header" autoscroll="true" class="ng-scope"&gt;&lt;/div&gt;
  &lt;section id="channels" class="bg-light-gray ng-scope"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 text-center"&gt;
                  &lt;h2 class="section-heading"&gt;Channels&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;!-- ngRepeat: channel in channels --&gt;&lt;div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope"&gt;
                  &lt;!-- change project pages to angular... --&gt;
                  &lt;a href="#portfolioModal2" class="portfolio-link" data-toggle="modal"&gt;
                      &lt;img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200"&gt;
                  &lt;/a&gt;
                  &lt;div class="portfolio-caption"&gt;
                      &lt;h4 class="ng-binding"&gt;Academic Musicology&lt;/h4&gt;
                      &lt;h5 class="ng-binding"&gt;Moderator : Urs Liska&lt;/h5&gt;
                      &lt;p class="text-muted ng-binding"&gt;
                        The Academic Musicology channel coordinates efforts between universities and publishers to facilitate the creation of texts used in academic musicology such as articles, books and critical editions.
                      &lt;/p&gt;
                      &lt;h5&gt;Memberss ...&lt;/h5&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- end ngRepeat: channel in channels --&gt;&lt;div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope"&gt;
                  &lt;!-- change project pages to angular... --&gt;
                  &lt;a href="#portfolioModal2" class="portfolio-link" data-toggle="modal"&gt;
                      &lt;img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200"&gt;
                  &lt;/a&gt;
                  &lt;div class="portfolio-caption"&gt;
                      &lt;h4 class="ng-binding"&gt;Contemporary Music&lt;/h4&gt;
                      &lt;h5 class="ng-binding"&gt;Moderator : Foo Bar&lt;/h5&gt;
                      &lt;p class="text-muted ng-binding"&gt;
                        The Contemporary Music channel coordinates the creation of contemporary music symbols and structures useable in LilyPond.
                      &lt;/p&gt;
                      &lt;h5&gt;Memberss ...&lt;/h5&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- end ngRepeat: channel in channels --&gt;&lt;div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope"&gt;
                  &lt;!-- change project pages to angular... --&gt;
                  &lt;a href="#portfolioModal2" class="portfolio-link" data-toggle="modal"&gt;
                      &lt;img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200"&gt;
                  &lt;/a&gt;
                  &lt;div class="portfolio-caption"&gt;
                      &lt;h4 class="ng-binding"&gt;Medieval Music&lt;/h4&gt;
                      &lt;h5 class="ng-binding"&gt;Moderator : John Doe&lt;/h5&gt;
                      &lt;p class="text-muted ng-binding"&gt;
                        Something about medieval music.
                      &lt;/p&gt;
                      &lt;h5&gt;Memberss ...&lt;/h5&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- end ngRepeat: channel in channels --&gt;&lt;div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope"&gt;
                  &lt;!-- change project pages to angular... --&gt;
                  &lt;a href="#portfolioModal2" class="portfolio-link" data-toggle="modal"&gt;
                      &lt;img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200"&gt;
                  &lt;/a&gt;
                  &lt;div class="portfolio-caption"&gt;
                      &lt;h4 class="ng-binding"&gt;Pedagogy&lt;/h4&gt;
                      &lt;h5 class="ng-binding"&gt;Moderator : Florence Nightengale&lt;/h5&gt;
                      &lt;p class="text-muted ng-binding"&gt;
                        The pedagogy channel helps pedagogues improve music theory, composition, history and education snippets created using LilyPond.
                      &lt;/p&gt;
                      &lt;h5&gt;Memberss ...&lt;/h5&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- end ngRepeat: channel in channels --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/mikesol/chru1awL/1/" rel="nofollow">http://jsfiddle.net/mikesol/chru1awL/1/</a></p>