diff --git a/index.html b/index.html
index 4340040..8254933 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,7 @@
   <link rel="stylesheet" href="dist/lesspass.min.css">
   <style>
     div.center {
-      width: 470px;
-      max-width: 100%;
+      max-width: 420px;
       display: block;
       margin-left: auto;
       margin-right: auto;
@@ -17,14 +16,14 @@
 
     @media (min-width: 544px) {
       #lesspass {
-        margin-top: 1em;
+        margin-top: 3em;
       }
     }
   </style>
 </head>
 <body>
-<div class="center">
-  <div id="lesspass" class="m-x-auto"></div>
+<div class="center lesspass--full-width">
+  <div id="lesspass"></div>
 </div>
 <script src="dist/lesspass.min.js"></script>
 </body>
diff --git a/src/LessPass.scss b/src/LessPass.scss
index 295ee28..1cb5b95 100644
--- a/src/LessPass.scss
+++ b/src/LessPass.scss
@@ -43,8 +43,17 @@
 @import '~hint.css/hint.css';
 @import '~awesomplete/awesomplete.css';
 
+.lesspass--unbordered #lesspass{
+  border: none;
+}
+
+.lesspass--full-width #lesspass{
+  max-width: none !important;
+}
+
 #lesspass {
   color: #464646;
+  max-width: 420px;
 }
 
 @media (max-width: 419px) {
diff --git a/src/LessPass.vue b/src/LessPass.vue
index 5f10110..4474b67 100644
--- a/src/LessPass.vue
+++ b/src/LessPass.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="lesspass" class="card" style="max-width: 420px;">
+  <div id="lesspass" class="card">
     <lesspass-menu></lesspass-menu>
     <lesspass-message></lesspass-message>
     <div class="card-block">
