Fix export alpha padding issue

components/Carbon.js

@@ -219,19 +219,22 @@ class Carbon extends React.Component {
 
     return (
       <div id="section">
-        {content}
+        <div id="export-container">
+          {content}
+          <div id="twitter-png-fix" />
+        </div>
         <style jsx>{`
-          #section {
+          #section,
+          #export-container {
             height: 100%;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
           }
 
-          #section::after {
+          /* forces twitter to save images as png — https://github.com/dawnlabs/carbon/issues/86 */
-            content: '';
+          #twitter-png-fix {
-            position: absolute;
-            bottom: 0;
             height: 1px;
             width: 100%;
             background: rgba(0, 0, 0, 0.01);

pages/editor.js

@@ -95,7 +95,7 @@ class Editor extends React.Component {
   }
 
   getCarbonImage() {
-    const node = document.getElementById('section')
+    const node = document.getElementById('export-container')
 
     const config = {
       style: {