💄 Make you nauseous

frontend/src/components/Header.module.css

@@ -1,9 +1,15 @@
+.header {
+  margin: 1rem auto;
+  max-width: 1220px;
+}
+
 .nav {
   display: flex;
   height: 5rem;
   align-items: center;
   text-transform: uppercase;
 }
+
 .navLink:after {
   position: absolute;
   right: 12px;
@@ -15,13 +21,14 @@
   content: "";
   transform: rotate(-2.5deg);
 }
+
 .navLink:hover:after {
   background-color: var(--brand);
   box-shadow: 0 0 4px var(--brand), 0 0 11px var(--brand), 0 0 19px var(--brand), 0 0 30px var(--brand);
 }
 
 .logoNav {
-  margin-left: 1.5rem;
+  margin-left: 8px;
 }
 
 .navItems {

frontend/src/components/Header.tsx

@@ -10,7 +10,7 @@ const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLi
 
 export const Header: React.FC = () => {
   return (
-    <header>
+    <header className={styles.header}>
       <nav className={styles.nav}>
         <NavLink to="/" className={styles.logoNav}>
           <div className={styles.brand}>BBS</div>

frontend/src/components/UserCard.module.css

@@ -8,6 +8,7 @@
   border-radius: 4px;
   color: var(--text);
   transition: background-color 0.1s ease-out, border 0.1s ease-out;
+  max-height: 100px;
 }
 
 .user:hover {