no in embeds

ui/docs/containers/app/index.js

@@ -24,10 +24,10 @@ module.exports = () => {
     <Base>
       <Container fluid>
         <Row>
-          <Column md={2} xs={12}>
+          <Column md={2} sm={3} xs={12}>
             <Navigation />
           </Column>
-          <Column md={10} xs={12}>
+          <Column md={10} sm={9} xs={12}>
             <Match
               component={Home}
               exactly

ui/docs/containers/item/index.js

@@ -1,7 +1,6 @@
 const get = require('lodash.get');
 const InnerHTML = require('dangerously-set-inner-html');
 const React = require('react');
-const styles = require('./style.css');
 const titleCase = require('title-case');
 
 const Docs = require('../../../src/docs');
@@ -21,7 +20,7 @@ const Item = ({
   );
 
   return (
-    <div className={styles.item}>
+    <div>
       {item}
     </div>
   );

ui/docs/containers/item/style.css

@@ -1,10 +0,0 @@
-
-.item {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: auto;
-
-  @media (min-width: 48em) {
-    margin-left: 15rem;
-  }
-}

ui/src/components/button/readme.md

@@ -14,7 +14,6 @@ const styles = require('./style.css');
 
 nmodule.exports = ReactDOM.renderToString(
   <Base>
-    <Container>
     <Row>
       <Column>
         <Button>
@@ -32,7 +31,6 @@ nmodule.exports = ReactDOM.renderToString(
         </Button>
       </Column>
     </Row>
-    </Container>
   </Base>
 );
 ```

ui/src/components/checkbox/readme.md

@@ -14,7 +14,6 @@ const styles = require('./style.css');
 
 nmodule.exports = ReactDOM.renderToString(
   <Base>
-    <Container>
     <Row>
       <Column>
         <Checkbox checked>
@@ -36,7 +35,6 @@ nmodule.exports = ReactDOM.renderToString(
         </Checkbox>
       </Column>
     </Row>
-    </Container>
   </Base>
 );
 ```

ui/src/components/column/readme.md

@@ -11,7 +11,7 @@ const Row = require('../row');
 const Column = require('./index');
 
 const styles = {
-  container: {
+  base: {
     backgroundColor: '#FFEBEE'
   },
   row: {
@@ -25,13 +25,13 @@ const styles = {
 };
 
 nmodule.exports = ReactDOM.renderToString(
-  <Container style={styles.container}>
+  <Base style={styles.base}>
     <Row style={styles.row} around>
       <Column style={styles.column} xs={2}>1</Column>
       <Column style={styles.column} xs={2}>2</Column>
       <Column style={styles.column} xs={2}>3</Column>
     </Row>
-  </Container>
+  </Base>
 );
 ```
 
@@ -45,13 +45,11 @@ const Column = require('ui/column');
 
 module.exports = () => {
   return (
-    <Container>
     <Row around>
       <Column xs={2}>1</Column>
       <Column xs={2}>2</Column>
       <Column xs={2}>3</Column>
     </Row>
-    </Container>
   );
 };
 ```

ui/src/components/container/readme.md

@@ -1,18 +1,3 @@
 # `<Container>`
 
-## demo
-
-```embed
-const React = require('react');
-const ReactDOM = require('react-dom/server');
-const Container = require('./index.js');
-const Button = require('../button');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Container>
-    <Button>Hello World</Button>
-  </Container>
-);
-```
-
 ## usage

ui/src/components/row/readme.md

@@ -10,12 +10,10 @@ const Container = require('../container');
 const Button = require('../button');
 
 nmodule.exports = ReactDOM.renderToString(
-  <Container>
   <Row center='xs' start='sm'>
     <Button>1</Button>
     <Button>2</Button>
   </Row>
-  </Container>
 );
 ```
 

ui/src/components/toggle/readme.md

@@ -14,7 +14,6 @@ const styles = require('./style.css');
 
 nmodule.exports = ReactDOM.renderToString(
   <Base>
-    <Container>
     <Row>
       <Column>
         <Toggle />
@@ -23,7 +22,6 @@ nmodule.exports = ReactDOM.renderToString(
         <Toggle off />
       </Column>
     </Row>
-    </Container>
   </Base>
 );
 ```

ui/test/index.js

@@ -11,3 +11,4 @@ test('renders <Button> without exploding', (t) => {
   const wrapper = shallow(<Button />);
   t.deepEqual(wrapper.length, 1);
 });
+