Header

src/TestHeader.js

@@ -4,13 +4,14 @@ function TestHeader() {
     return (
         <header>
             <div style={{gridArea:"1 / span 3"}}>
-                <ul>
+            <div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
-                    <li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></li>
+               <div className="navigation"> <ul>
                     <li className="headerMenuItem"><a href=".">Build Planner</a></li>
                     <li className="headerMenuItem"><a href=".">Guides</a></li>
                     <li className="headerMenuItem"><a href=".">Blog</a></li>
                     <li className="headerMenuItem"><a href=".">About</a></li>
-                </ul>
+                </ul></div>
+                <div className="navigation2">lol</div>
             </div>
         </header>
     )

src/style.css

@@ -103,16 +103,32 @@ header a:hover {
 	grid-template-columns: repeat(auto-fit,minmax(300px,450px));
 	justify-content: center;
 	gap: 10px;
+}
+.main {
 	margin: 0 10px;
 }
 header {
+	background-color: rgba(0,0,0,0.66);
+	backdrop-filter: blur(10px);
 	text-align: left;
+	margin: 0;
 }
 header > div {
-	background-color: rgba(0,0,0,0.33);
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
 }
-header li {
+.navigation {
+	text-align: center;
+	font-size: 17px;
+	font-family: "ngs2";
+	align-items: stretch;
+}
+.navigation li {
 	display: inline-block;
+	margin-left: 20px;;
+}
+.navigation2 {
+	text-align: right;
 }
 .box {
 	/*color: #97e2fc;*/