Fix #568

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,5 @@
 <!-- PLEASE READ THE FOLLOWING INSTRUCTIONS -->
+<!-- DO NOT REBUILD THE CSS OUTPUT IN YOUR PR -->
 
 ### Proposed solution
 <!-- Which specific problem does this PR solve and how?  -->
@@ -18,4 +19,4 @@
 <!-- 3. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
 <!-- 4. If your PR fixes an issue, reference that issue -->
 <!-- 5. If your PR has lots of commits, **rebase** first -->
-<!-- 6. Run `npm run deploy` before submitting your PR -->
+<!-- 6. Your PR should only affect `.sass` and documentation files -->

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Bulma Changelog
 
+## 0.4.1
+
+# Fix #568 max-width container
+
 ## 0.4.0
 
 * **Default font-size is 16px**

css/bulma.css

@@ -2768,6 +2768,7 @@ input[type="submit"].button {
 @media screen and (min-width: 1000px) {
   .container {
     margin: 0 auto;
+    max-width: 960px;
     width: 960px;
   }
   .container.is-fluid {
@@ -2779,12 +2780,14 @@ input[type="submit"].button {
 
 @media screen and (min-width: 1192px) {
   .container {
+    max-width: 1152px;
     width: 1152px;
   }
 }
 
 @media screen and (min-width: 1384px) {
   .container {
+    max-width: 1344px;
     width: 1344px;
   }
 }

docs/css/bulma-docs.css

@@ -2768,6 +2768,7 @@ input[type="submit"].button {
 @media screen and (min-width: 1000px) {
   .container {
     margin: 0 auto;
+    max-width: 960px;
     width: 960px;
   }
   .container.is-fluid {
@@ -2779,12 +2780,14 @@ input[type="submit"].button {
 
 @media screen and (min-width: 1192px) {
   .container {
+    max-width: 1152px;
     width: 1152px;
   }
 }
 
 @media screen and (min-width: 1384px) {
   .container {
+    max-width: 1344px;
     width: 1344px;
   }
 }

sass/elements/other.sass

@@ -5,6 +5,7 @@
   position: relative
   +desktop
     margin: 0 auto
+    max-width: $desktop - 40px
     width: $desktop - 40px
     // Modifiers
     &.is-fluid
@@ -12,8 +13,10 @@
       max-width: none
       width: auto
   +widescreen
+    max-width: $widescreen - 40px
     width: $widescreen - 40px
   +fullhd
+    max-width: $fullhd - 40px
     width: $fullhd - 40px
 
 .delete