Add auto margin left and right classes (#1048)

* Add auto margin class

* remove mx-auto

* move to the layout.css

Author: miafan23

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.9.2
+
+- [add] Add `ml-auto` and `mr-auto`
+
 ## 1.9.1
 
 - [add] Modify `snow` icon

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/assembly",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "A CSS framework",
   "main": "index.js",
   "files": [

package.json

@@ -163,13 +163,18 @@
  */
 
 /**
- * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements.
+ * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements 
+ * or aligning block elements to the start or end of their container.
  *
  * @example
  * <div class='mx-auto w60 bg-darken10'>mx-auto</div>
+ * <div class='ml-auto w60 bg-darken10'>ml-auto</div>
+ * <div class='mr-auto w60 bg-darken10'>mr-auto</div>
  * @memberof Margins
  */
 .mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mr-auto { margin-right: auto !important; }
 
 /**
  * All padding classes fit the following pattern: `m<side><size>`.