Q:

Bootstrap container max-width doesn't work

After using the code this way:
    
    
    
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container{
    max-width:980px;
}
</style>
</head>
<body>
  <div class="container" style="max-width:980px;">
     ...
  </div>

</body>
</html>

I get the whole container going over 1100px

A:

A better way to do this is
1)create your own less file as a main less file ( like bootstrap.less ).
2)Import all bootstrap less files you need. (in this case, you just need to import all responsive less files but responsive-1200px-min.less)
3)If you need to modify anything in original bootstrap less file, you just need to write your own less to overwrite bootstrap's less code. (Just remember to put your less code/file after @import {bootstrap's less file}; ).
@media (max-width:1200px) 
@media (min-width: 979px)

Second way 
use .container-fluid
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

insert in your custom css

