change logo position

src/components/Header/Header.jsx

 
     return (
         <Container>
-            <Box sx={{color:"white", px:5}}>
+            <Box sx={{color:"white", px:6.1}}>
                 <Box sx={{display:"flex", gap:1, cursor:"pointer"}}>
                     <InstagramIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://www.instagram.com/amber.officials/?hl=en', '_blank')}} />
                     <FacebookIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://www.facebook.com/amber.officials/', '_blank')}}/>

src/components/Navbar/Navbar.jsx

         <Toolbar sx={{
           px: {
             xs: 2,
-          md: 5,
-          lg: 5
+            md: 6,
+            lg: 6
           },
           py: 0.5
         }} disableGutters>
             {/* Left Section: Logo */}
             <Box
               sx={{
-                ml:1,
                 mr: {
                   xs: 0,
                   sm: 0,