fix menu width and margin

src/App.vue

 <template>
   <div v-frag>
     <header class="header-menu">
-      <div class="ui container">
+      <div class="menu container">
         <div class="ui inverted icon menu">
           <router-link to="/" class="header item">
             <img
               class="ui mini right spaced image"
               src="@/assets/img/logo-neogeo-circle.png"
             />
-            <!-- :src="LOGO_PATH" -->
-            {{ getApplicationName() }}
+            {{ APPLICATION_NAME }}
           </router-link>
 
           <div
@@ -156,8 +155,9 @@ export default {
       "configuration",
     ]),
     ...mapGetters(["project"]),
-    //LOGO_PATH: () => require(`${configuration.VUE_APP_LOGO_PATH}`),
-    //APPLICATION_NAME: () => this.configuration.VUE_APP_APPLICATION_NAME,
+    APPLICATION_NAME: function () {
+      return this.configuration.VUE_APP_APPLICATION_NAME;
+    },
     PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
     userFullname: function () {
       if (this.user.first_name || this.user.last_name)
@@ -165,17 +165,17 @@ export default {
       return null;
     },
   },
+
   methods: {
     logout() {
       this.$store.dispatch("LOGOUT");
     },
-    getApplicationName() {
-      return this.configuration.VUE_APP_APPLICATION_NAME;
-    },
+
     clickOutsideMenu(e) {
       if (!e.target.closest("#menu-dropdown")) this.menuIsOpen = false;
     },
   },
+
   created() {
     window.addEventListener("mousedown", this.clickOutsideMenu);
   },
@@ -190,8 +190,18 @@ export default {
 @import "./assets/styles/base.css";
 @import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
 
-.header-menu {
-  min-width: 560px;
+@media screen and (min-width: 560px) {
+  .header-menu {
+    min-width: 560px;
+  }
+}
+
+@media screen and (min-width: 560px) {
+  .menu.container {
+    width: auto !important;
+    margin-left: 1em !important;
+    margin-right: 1em !important;
+  }
 }
 
 body {