fixed layout issues

lucaayscough · Aug 28, 2023 · 93cdc63 · 93cdc63
1 parent 1729da2
commit 93cdc63
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 20 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -43,6 +43,8 @@ main {
   flex-direction: column;
   align-items: center;
   flex: 1;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 @media (min-width: 768px) {

diff --git a/src/components/header.css b/src/components/header.css
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,10 +1,9 @@
 import Link from "next/link"
 import Image from "next/image"
-import "./header.css"
 
 function Header() {
   return (
-    <header className="flex flex-col items-center justify-center p-20 pb-12 gap-8">
+    <header className="flex flex-col items-center justify-center px-8 pb-12 pt-20 gap-8">
       <div>
         <Image
           priority
@@ -15,9 +14,9 @@ function Header() {
         />
       </div>
 
-      <div className="redBar"></div>
+      <div className="w-full h-1 bg-red"></div>
 
-      <nav className="navBar">
+      <nav className="flex flex-col md:flex-row text-lg font-light gap-4">
         <Link className="headerLink" href="/">ABOUT</Link>
         <Link className="headerLink" href="/media">MEDIA</Link>
         {/* <Link className="headerLink" href="/music">MUSIC</Link> */}