switch to max-width on containers

dist/css/bootstrap.css

@@ -654,17 +654,17 @@ pre code {
 }
 @media (min-width: 48em) {
   .container {
-    width: 45rem;
+    max-width: 45rem;
   }
 }
 @media (min-width: 62em) {
   .container {
-    width: 60rem;
+    max-width: 60rem;
   }
 }
 @media (min-width: 75em) {
   .container {
-    width: 72.25rem;
+    max-width: 72.25rem;
   }
 }
 .container-fluid {

docs/dist/css/bootstrap.css

@@ -654,17 +654,17 @@ pre code {
 }
 @media (min-width: 48em) {
   .container {
-    width: 45rem;
+    max-width: 45rem;
   }
 }
 @media (min-width: 62em) {
   .container {
-    width: 60rem;
+    max-width: 60rem;
   }
 }
 @media (min-width: 75em) {
   .container {
-    width: 72.25rem;
+    max-width: 72.25rem;
   }
 }
 .container-fluid {

docs/examples/grid/grid.css

-h4 {
-  margin-top: 25px;
+body {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
+
+h3 {
+  margin-top: 2rem;
+}
+
 .row {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 .row .row {
-  margin-top: 10px;
+  margin-top: 1rem;
   margin-bottom: 0;
 }
 [class*="col-"] {
-  padding-top: 15px;
-  padding-bottom: 15px;
-  background-color: #eee;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   background-color: rgba(86,61,124,.15);
-  border: 1px solid #ddd;
   border: 1px solid rgba(86,61,124,.2);
 }
 
 hr {
-  margin-top: 40px;
-  margin-bottom: 40px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }

less/_grid.less

@@ -11,13 +11,13 @@
   .make-container();
 
   @media (min-width: @screen-sm-min) {
-    width: @container-sm;
+    max-width: @container-sm;
   }
   @media (min-width: @screen-md-min) {
-    width: @container-md;
+    max-width: @container-md;
   }
   @media (min-width: @screen-lg-min) {
-    width: @container-lg;
+    max-width: @container-lg;
   }
 }