Fix desktop container

docs/css/bulma-docs.css

@@ -3429,16 +3429,20 @@ input[type="submit"].button {
 
 .container {
   margin: 0 auto;
-  max-width: 960px;
   position: relative;
-  width: 960px;
 }
 
-.container.is-fluid {
-  margin-left: 24px;
-  margin-right: 24px;
-  max-width: none;
-  width: auto;
+@media screen and (min-width: 1008px) {
+  .container {
+    max-width: 960px;
+    width: 960px;
+  }
+  .container.is-fluid {
+    margin-left: 24px;
+    margin-right: 24px;
+    max-width: none;
+    width: auto;
+  }
 }
 
 @media screen and (max-width: 1199px) {
@@ -3782,6 +3786,11 @@ input[type="submit"].button {
   display: block;
 }
 
+.dropdown.is-right .dropdown-menu {
+  left: auto;
+  right: 0;
+}
+
 .dropdown-menu {
   display: none;
   left: 0;

docs/documentation/components/dropdown.html

@@ -127,6 +127,46 @@ doc-subtab: dropdown
 </div>
 {% endcapture %}
 
+{% capture dropdown_left_example %}
+<div class="dropdown is-active">
+  <div class="dropdown-trigger">
+    <a class="button is-info">
+      <span>Left aligned</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-menu">
+    <div class="dropdown-content">
+      <div class="dropdown-item">
+        <p>The dropdown is <strong>left-aligned</strong> by default.</p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture dropdown_right_example %}
+<div class="dropdown is-right is-active">
+  <div class="dropdown-trigger">
+    <a class="button is-info">
+      <span>Right aligned</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-menu">
+    <div class="dropdown-content">
+      <div class="dropdown-item">
+        <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
 {% include subnav-components.html %}
 
 <section class="section">
@@ -246,5 +286,37 @@ doc-subtab: dropdown
         {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
       </div>
     </div>
+
+    <hr>
+
+    <h3 class="title">
+      Right aligned
+    </h3>
+
+    <div class="content">
+      <p>
+        You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              {{dropdown_left_example}}
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+              {{dropdown_right_example}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{dropdown_right_example}}{% endhighlight %}
+      </div>
+    </div>
   </div>
 </section>

sass/components/dropdown.sass

@@ -21,6 +21,10 @@ $dropdown-divider-background: $border !default
   &.is-hoverable:hover
     .dropdown-menu
       display: block
+  &.is-right
+    .dropdown-menu
+      left: auto
+      right: 0
 
 .dropdown-menu
   display: none

sass/elements/other.sass

@@ -3,14 +3,15 @@
 
 .container
   margin: 0 auto
-  max-width: $desktop - (2 * $gap)
   position: relative
-  width: $desktop - (2 * $gap)
-  &.is-fluid
-    margin-left: $gap
-    margin-right: $gap
-    max-width: none
-    width: auto
+  +desktop
+    max-width: $desktop - (2 * $gap)
+    width: $desktop - (2 * $gap)
+    &.is-fluid
+      margin-left: $gap
+      margin-right: $gap
+      max-width: none
+      width: auto
   +until($widescreen)
     &.is-widescreen
       max-width: $widescreen - (2 * $gap)