Max width: reduced, added to nav menu

src/components/MenuItem.astro

@@ -24,6 +24,14 @@ const { name, link, icon } = Astro.props;
         // 0.6rem = horizontal padding
         padding: 0 0.6rem;
         font-size: 1.15rem;
+
+        &:first-child {
+            padding-left: 0;
+        }
+        
+        &:last-child {
+            padding-right: 0;
+        }
     }
 
     a {

src/layouts/Layout.astro

@@ -25,6 +25,7 @@ const { title, description } = Astro.props;
 
 <style lang="less" is:global>
 	@import "/src/styles/theme.less";
+	@import "/src/styles/max_width.less";
 
 	body {
 		.theme-mixin();
@@ -43,7 +44,7 @@ const { title, description } = Astro.props;
 	main  {
 		margin: auto;
 		padding: 0.25rem;
-		max-width: 300rem;
+		max-width: @max-width;
 	}
 
 	article {

src/layouts/Menu.astro

@@ -14,8 +14,13 @@ import ThemeModal from "../components/ThemeModal.astro";
 </nav>
 
 <style lang="less">
+    @import "/src/styles/max_width.less";
+
     nav {
-        margin: 0.4rem;
+        margin: 0.4rem auto;
+        max-width: @max-width;
+        width: 100%;
+
         display: flex;
         flex-direction: row;
         justify-content: space-between;

src/styles/max_width.less

@@ -0,0 +1 @@
+@max-width: 800px;