title: Twitter Bootstrap & rails - center content and fix min width
body: <p>In my html the content should be centered on screen and his width should never be greater then 950px.</p>
  
  <p>Since I want this same html to show on mobile and desktop I am using twitter bootstrap to make the layout responsive.</p>
  
  <p>The problem is: I cant seem to make the content div to be centered AND have the max width of 950px.</p>
  
  <p>When I open on a browser the css has this media query: </p>
  
  <pre><code>@media (min-width: 1200px)
  </code></pre>
  
  <p>that makes my div always fit the entire screen.</p>
  
  <p>How can I fix this?</p>
  
  <p>Basically what I want to do is something like this: </p>
  
  <p><img src="https://i.stack.imgur.com/cfqOE.jpg" alt="Schema"></p>
  
  <p>The orange line is the container (or body) and the blues are the rows</p>
  
  <p>Thanks for any help.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Just something I found that maybe help someone to help me</p>
  
  <p>If I comment out this line: </p>
  
  <pre><code>@import "twitter/bootstrap/responsive";
  </code></pre>
  
  <p>my <code>div.content</code> keeps the 950px width but my html loses its responsive behavior, which I don't want</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>The html markup:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
            &lt;%= Content goes here %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but on the browser it creates this things:</p>
  
  <pre><code>body = 100% width, on chrome 1280px
  .container = width 1170px
  .row = width 1200px
  .span12 = width 1170px
  </code></pre>
  
  <p>Just to clarify, this is not a problem on twitter bootstrap, this is a problem on <a href="https://github.com/seyhunak/twitter-bootstrap-rails" rel="nofollow noreferrer">twitter-bootstrap-rails</a></p>
  
  <p>The way I found to fix it on development is open the <a href="https://github.com/seyhunak/twitter-bootstrap-rails" rel="nofollow noreferrer">twitter-bootstrap-rails</a> gem with <a href="https://github.com/fnando/gem-open" rel="nofollow noreferrer">gem-open</a> and change the file: <code>/vendor/toolkit/twitter/bootstrap/responsive.less</code> commenting out these lines:</p>
  
  <pre><code>// LARGE DESKTOP &amp; UP
  // ------------------
  
  @media (min-width: 1200px) {
  
    // Fixed grid
    #grid &gt; .core(70px, 30px);
  
    // Fluid grid
    #grid &gt; .fluid(5.982905983%, 2.564102564%);
  
    // Input grid
    #grid &gt; .input(70px, 30px);
  
    // Thumbnails
    .thumbnails {
      margin-left: -30px;
    }
    .thumbnails &gt; li {
      margin-left: 30px;
    }
  
  }
  </code></pre>