narrowing the page, max-width from 1320px to 1140

layouts/partials/header.html

@@ -2,21 +2,21 @@
     <div class="header">
         <a class="site-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
 
-        <ul class="menu">
+        <nav class="menu">
             {{ range .Site.Menus.main }}
-                <li class="menu-item">
+                <div class="menu-item">
                     {{ if not .Children }}
                         <a href="{{ .URL }}">{{ .Name }}</a>
                     {{ else }}
                         <a>{{ .Name }}↓</a>
-                        <ul class="sub-menu">
+                        <nav class="sub-menu">
                             {{ range .Children }}
-                            <li class="menu-item"><a href="{{ .URL }}">{{ .Name }}</a></li>
+                            <div class="menu-item"><a href="{{ .URL }}">{{ .Name }}</a></div>
                             {{ end }}
-                        </ul>
+                        </nav>
                     {{ end }}
-                </li>
+                </div>
             {{ end }}
-        </ul>
+        </nav>
     </div>
 </header>

static/css/style.css

@@ -150,6 +150,7 @@ body {
 .main { flex: 0 0 72%; width: 72%; }
 .side { flex: 0 0 28%; width: 28%; }
 
+/* mobile layout: place side to bottom */
 @media (max-width: 991px) {
   .main { padding: var(--len-4); }
   .side { padding-left: 0; padding-top: var(--len-4); }
@@ -183,8 +184,7 @@ body {
 
 /********** set up break point **********/
 
-                             .main-wrapper, .header { max-width: 1320px; }
-@media (max-width: 1399px) { .main-wrapper, .header { max-width: 1140px; } }
+                             .main-wrapper, .header { max-width: 1140px; }
 @media (max-width: 1199px) { .main-wrapper, .header { max-width: 960px; } }
 @media (max-width: 991px)  { .main-wrapper, .header { max-width: 720px; } }
 @media (max-width: 767px)  { .main-wrapper, .header { max-width: 540px; } }
@@ -259,10 +259,6 @@ body {
   align-items: flex-start;
 }
 
-/* remove the unwanted default css in menus */
-.header ul { list-style: none; margin: 0; padding: 0; }
-.header li { list-style: none; }
-
 /* set up spacing of menu items in menu and sub-menu */
 .header .menu > *            { margin-right: var(--len-3); }
 .header .menu > *:last-child { margin-right: 0; }