fixed header css

my-app/src/components/header.tsx

@@ -3,7 +3,7 @@ import MaterialUISwitch from './switch'
 import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
 import React, { useState, useContext} from "react";
 import { useEffect } from "react";
-import logo from '../img/first.jpg';
+import logo from '../img/logo.png';
 
 import { ColorModeContext } from '../utils/color-toggle';
 import { useTranslation } from 'react-i18next';
@@ -69,18 +69,24 @@ function Header()
               <a className="logo" href="/">
                 <img src={logo} alt="Logo" />
               </a>
-              <div className="pages">
-                <a href="/contact">{t("page1")}</a>
-              </div>
-              <div className="pages">
-                <a href="/projects">{t("page2")}</a>
-              </div>
-              <div className="pages">
-                <a href="/resume">{t("page3")}</a>
-              </div>
-              <div className="pages">
-                <a href="/skills">{t("page4")}</a>
+
+              <div className="menu">
+                <div className="pages">
+                  <a href="/projects">{t("page2")}</a>
+                </div>
+                <div className="pages">
+                  <a href="/skills">{t("page4")}</a>
+                </div>
+                <div className="pages">
+                  <a href="/contact">{t("page1")}</a>
+                </div>
+                <div className="pages">
+                  <a href="/resume">{t("page3")}</a>
+                </div>
               </div>
+
+
+
               <div className="language">
                 {/* <MenuSimple/> */}
                 <Box sx={{ minWidth: 120 }}>

my-app/src/css/contact.css

@@ -16,7 +16,7 @@
 	margin-bottom: 5vh;
 }
 
-.contact_list{
+.contact_list {
 	font-size: 1vw;
 	font-weight: 800;
 	margin-top: 1vh;

my-app/src/css/mine.css

@@ -54,10 +54,12 @@ body {
     justify-content: space-between;
   }
   
-  .logo img{
+  .logo{
+    background-color: black;
     height: 100%; /* Adjust the size as needed */
-    margin-left: 3vw;
-    margin-right: 20vw;
+    /* width: 50%; */
+    /* margin-left: 3vw; */
+    /* margin-right: 20vw; */
     margin-bottom: 1vh;
   }
   
@@ -74,6 +76,16 @@ body {
     }
   }
 
+  .menu {
+    display: flex;
+    flex-direction: row;
+    width: 50vw;
+    margin-right: 7vw;
+    /* align-self: flex-end; */
+    justify-content: right;
+    /* float: right; */
+  }
+  
   .title {
     color:black;
     font-weight: 800;
@@ -81,16 +93,13 @@ body {
     margin-right: 98vw;
   }
 
-  .menu {
-    float: right;
-  }
 
   .language {
     align-items: center;
     display: flex;
     flex-direction: row;
     justify-content: right;
-    width: 50vw;
+    width: 20vw;
     margin-top: 0vh;
     margin-left: 0vw;
     height: 100%;