diff --git a/index.html b/index.html
index 8b378b8..666b102 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,12 @@
         height: 100%;
         width: 100%;
       }
+
+      @media screen and (max-width:640px){
+        #app {
+            margin:0;
+        }
+      }
     </style>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/src/App.vue b/src/App.vue
index 67947d6..bf24ba8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,18 +87,18 @@ mdui-layout-main {
 
 mdui-card {
   margin: 3px;
-  width: 24.5%;
+  width: calc(25% - 6px);
   height: 25%;
 }
 
 @media screen and (max-width: 640px) {
   mdui-card {
-    margin: 0;
-    width: 100%;
+    width: calc(100% - 6px);
   }
 
   mdui-layout-main{
     flex-direction: column;
+    flex-wrap: nowrap;
   }
 }
 </style>