fix(style): auto width problem caused by too long tags or site t… (#168)

assets/css/_partial/_header.scss

@@ -10,6 +10,9 @@ header {
   .header-title {
     font-size: 1.5rem;
     font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .menu .menu-item {
@@ -47,11 +50,18 @@ header {
   .header-wrapper {
     width: auto;
     text-align: center;
-    padding: 0 3rem;
+    padding: 0 3%;
     display: flex;
     justify-content: space-between;
 
+    .header-title {
+      max-width: 30%;
+    }
+
     .menu {
+      overflow: hidden;
+      white-space: nowrap;
+
       .menu-item {
         margin: 0 .5rem;
 
@@ -93,6 +103,10 @@ header {
       padding-left: 1rem;
       box-sizing: border-box;
 
+      .header-title {
+        max-width: 80%;
+      }
+
       .menu-toggle {
         cursor: pointer;
         line-height: 4rem;