Docs content align (#700)

* Docs for content-align, some bug fixes for it too

* Make the example output a little clearer

* Remove app.run() from content-align docs example

* Improve wording

* Move content-align and scrollbar-gutter docs exmaples to split css/py files

* Remove app.run() from scrollbar-gutter docs example

docs/styles/border.md

@@ -3,7 +3,7 @@
 The `border` rule enables the drawing of a box around a widget. A border is set with a border value (see below) followed by a color.
 
 | Border value | Explanation                                             |
-| ------------ | ------------------------------------------------------- |
+| ------------ |---------------------------------------------------------|
 | `"ascii"`    | A border with plus, hyphen, and vertical bar            |
 | `"blank"`    | A blank border (reserves space for a border)            |
 | `"dashed"`   | Dashed line border                                      |

docs/styles/content_align.md

@@ -0,0 +1,65 @@
+# Content-align
+
+The `content-align` property allows you to align content _inside_ a widget.
+
+You can specify the alignment of content on both the horizontal and vertical axes.
+
+## Syntax
+
+```
+content-align: <HORIZONTAL> <VERTICAL>;
+```
+
+### Values
+
+#### `HORIZONTAL`
+
+| Value            | Description                                        |
+|------------------|----------------------------------------------------|
+| `left` (default) | Align content on the left of the horizontal axis   |
+| `center`         | Align content in the center of the horizontal axis |
+| `right`          | Align content on the right of the horizontal axis  |
+
+#### `VERTICAL`
+
+| Value           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `top` (default) | Align content at the top of the vertical axis    |
+| `middle`        | Align content in the middle of the vertical axis |
+| `bottom`        | Align content at the bottom of the vertical axis |
+
+## Example
+
+=== "content_align.py"
+
+    ```python
+    --8<-- "docs/examples/styles/content_align.py"
+    ```
+
+=== "content_align.css"
+
+    ```scss
+    --8<-- "docs/examples/styles/content_align.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/content_align.py"}
+    ```
+
+## CSS
+
+```sass
+/* Align content in the very center of a widget */
+content-align: center middle;
+/* Align content at the top right of a widget */
+content-align: right top;
+```
+
+## Python
+```python
+# Align content in the very center of a widget
+widget.styles.content_align = ("center", "middle")
+# Align content at the top right of a widget
+widget.styles.content_align = ("right", "top")
+```

docs/styles/scrollbar_gutter.md

@@ -1,4 +1,4 @@
-# Scrollbar gutter
+# Scrollbar-gutter
 
 The `scrollbar-gutter` rule allows authors to reserve space for the vertical scrollbar.
 
@@ -28,6 +28,12 @@ terminal window.
     --8<-- "docs/examples/styles/scrollbar_gutter.py"
     ```
 
+=== "scrollbar_gutter.css"
+
+    ```scss
+    --8<-- "docs/examples/styles/scrollbar_gutter.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/scrollbar_gutter.py"}