Fix container

docs/css/bulma-docs.css

@@ -251,13 +251,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-block-desktop-only {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-block-widescreen {
     display: block !important;
   }
@@ -297,13 +297,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-flex-desktop-only {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-flex-widescreen {
     display: flex !important;
   }
@@ -343,13 +343,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-inline-desktop-only {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-inline-widescreen {
     display: inline !important;
   }
@@ -389,13 +389,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-inline-block-desktop-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-inline-block-widescreen {
     display: inline-block !important;
   }
@@ -435,13 +435,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-inline-flex-desktop-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-inline-flex-widescreen {
     display: inline-flex !important;
   }
@@ -519,13 +519,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-hidden-desktop-only {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-hidden-widescreen {
     display: none !important;
   }
@@ -2700,7 +2700,7 @@ a.box:active {
 
 .title .tag,
 .subtitle .tag {
-  vertical-align: bottom;
+  vertical-align: middle;
 }
 
 .title {
@@ -2799,14 +2799,14 @@ a.box:active {
     max-width: 960px;
   }
   .container.is-fluid {
-    margin: 0 1.5rem;
+    margin: 0 20px;
     max-width: none;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .container {
-    max-width: 1200px;
+    max-width: 1152px;
   }
 }
 
@@ -4815,7 +4815,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .column.is-narrow-widescreen {
     flex: none;
   }
@@ -5175,7 +5175,7 @@ label.panel-block:hover {
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .hero-body {
     padding-left: 0;
     padding-right: 0;

docs/documentation/layout/container.html

@@ -23,8 +23,10 @@ doc-subtab: container
         <li><code>.section</code></li>
         <li><code>.footer</code></li>
       </ul>
-      <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>1.5rem</strong> on both the left and right sides.</p>
+      <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
-      <p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+      <p>On <strong>desktop</strong> (>= 1000px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+      <p>On <strong>widescreen</strong> (>= 1192px), the container will have a maximum width of <strong>1152px</strong>.</p>
+      <p>The values <strong>960</strong> and <strong>1152</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
     </div>
   </div>
 

sass/elements/other.sass

@@ -5,13 +5,13 @@
   position: relative
   +desktop
     margin: 0 auto
-    max-width: $desktop - 40px
+    max-width: $desktop - 40px // 960px
     // Modifiers
     &.is-fluid
-      margin: 0 1.5rem
+      margin: 0 20px
       max-width: none
   +widescreen
-    max-width: $widescreen - 40px
+    max-width: $widescreen - 40px // 1152px
 
 .delete
   +delete

sass/elements/title.sass

@@ -18,7 +18,7 @@ $subtitle-weight:   $weight-light !default
   strong
     font-weight: $title-weight-bold
   .tag
-    vertical-align: bottom
+    vertical-align: middle
 
 .title
   color: $title

sass/utilities/mixins.sass

@@ -185,8 +185,10 @@
 // Responsiveness
 
 $tablet: 769px !default
-$desktop: 1000px !default
+$desktop: 1000px !default // 960px container + 40px
-$widescreen: 1240px !default
+$widescreen: 1192px !default // 1152px container + 40
+// 960 and 1152 have been chosen because
+// they are divisible by both 12 and 16
 
 =from($device)
   @media screen and (min-width: $device)