style: adds form negative margin back in, adds padding to sticky header

src/client/components/forms/Form/index.scss

@@ -1,11 +1,16 @@
 @import '../../../scss/styles.scss';
 
 .form {
+  @include row;
 
   > * {
     width: 100%;
   }
 
+  .sticky-header {
+    @include gutter;
+  }
+
   > .btn {
     @include gutter;
   }

src/client/components/forms/field-types/Group/index.js

@@ -6,21 +6,26 @@ import RenderFields from '../../RenderFields';
 import './index.scss';
 
 const Group = (props) => {
-  const { label, fields, name, defaultValue } = props;
+  const {
+    label, fields, name, defaultValue,
+  } = props;
 
   return (
-    <Section
-      heading={label}
-      className="field-group"
-    >
-      <RenderFields fields={fields.map((subField) => {
-        return {
-          ...subField,
-          name: `${name}.${subField.name}`,
-          defaultValue: defaultValue[subField.name],
-        };
-      })} />
-    </Section>
+    <div className="field-type group">
+      <Section
+        heading={label}
+        className="field-group"
+      >
+        <RenderFields fields={fields.map((subField) => {
+          return {
+            ...subField,
+            name: `${name}.${subField.name}`,
+            defaultValue: defaultValue[subField.name],
+          };
+        })}
+        />
+      </Section>
+    </div>
   );
 };
 

src/client/components/layout/Section/index.scss

@@ -3,7 +3,6 @@
 section.section {
   @include shadow;
   margin: base(1) 0;
-  transition: 300ms ease;
 
   &:hover {
     box-shadow: 0 22px 65px rgba(0,0,0,.15);