title: How to extend width of the container in Twitter Bootstrap
body: <p>I'm using the <code>.container</code> class in my navbar, body, and footer. </p>
  
  <p>So all three align well on the left. However, I would like to increase the width of the <code>container</code> class. </p>
  
  <p>By default the width is coming at 1170:</p>
  
  <pre><code>media="screen, projection"
  bundle-bundle_bootstrap_head.css:6139@media (min-width: 1200px)
  .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
  width: 1170px;
  }
  </code></pre>
  
  <p>However, I would like to extend the width to 1300. So I added the following in my <code>main.css</code></p>
  
  <pre><code>.container {
      width: 1200px;
  }
  </code></pre>
  
  <p>But this doesn't seem to work. When I reload the page and inspect the CSS, the 1200 is crossed out and 1170 is still active. </p>
  
  <p><strong>Question</strong></p>
  
  <p>How can I extend the default width of the <code>container</code> class in bootstrap?</p>