change(navbar) changed the style of navbar

components/navbar.js

@@ -6,7 +6,7 @@ function Navbar() {
 
   return (
     <div className="navbar">
-      <h1>Teknoloji Rehberleri</h1>
+      <h1 className="navbar_logo">Teknoloji Rehberleri</h1>
       <ul className="navbar_list">
         <li
           className={
@@ -26,15 +26,6 @@ function Navbar() {
         >
           <Link href="/hakkinda"> Site Hakkında </Link>
         </li>
-        <li
-          className={
-            router.asPath == "/yazigonder"
-              ? "navbar_list-item navbar_list-item--active"
-              : "navbar_list-item"
-          }
-        >
-          <Link href="/yazigonder"> Yazı Gönder </Link>
-        </li>
       </ul>
     </div>
   );

styles/base/_base.scss

@@ -13,7 +13,6 @@ html {
 
 body {
   box-sizing: border-box;
-  padding: 3rem;
   background-color: var(--color-background);
 }
 

styles/base/_typography.scss

@@ -4,7 +4,7 @@ li {
 }
 
 h1 {
-  font-size: 2.7rem;
+  font-size: 2.5rem;
   color: var(--color-primary);
 }
 

styles/components/navbar.scss

@@ -1,11 +1,23 @@
 .navbar {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: repeat(5, 1fr);
+  justify-items: center;
+
+  background-color: var(--color-grey);
+  padding: 1.6rem;
+
+  &_logo {
+    justify-self: flex-end;
+    grid-column: 1;
+  }
 
   &_list {
     display: flex;
-    justify-content: flex-end;
+    grid-column: 5;
-    margin-top: 0.5rem;
+    justify-self: flex-start;
+
+    margin-top: 0.3rem;
+    margin-left: 2rem;
 
     font-size: 2rem;
     list-style-type: none;