Better mobile layout

client/components/Checkbox/Checkbox.js

@@ -6,7 +6,15 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  margin: 24px 32px 24px 0;
+  margin: 24px 16px 24px;
+
+  :first-child {
+    margin-left: 0;
+  }
+
+  :last-child {
+    margin-right: 0;
+  }
 `;
 
 const Box = styled.span`

client/components/Settings/Settings.js

@@ -23,7 +23,7 @@ import {
 const Wrapper = styled.div`
   poistion: relative;
   width: 600px;
-  max-width: 97%;
+  max-width: 90%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;

client/components/Shortener/Shortener.js

@@ -12,7 +12,7 @@ import { fadeIn } from '../../helpers/animations';
 const Wrapper = styled.div`
   position: relative;
   width: 800px;
-  max-width: 100%;
+  max-width: 98%;
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;

client/components/Shortener/ShortenerOptions.js

@@ -16,12 +16,17 @@ const Wrapper = styled.div`
   z-index: 2;
 
   @media only screen and (max-width: 448px) {
+    width: 100%;
     top: 56px;
   }
 `;
 
 const CheckboxWrapper = styled.div`
   display: flex;
+
+  @media only screen and (max-width: 448px) {
+    justify-content: center;
+  }
 `;
 
 const InputWrapper = styled.div`